fix: improve transition outro effect

.changeset/smart-waves-march.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: improve transition outro effect

packages/svelte/src/internal/client/transitions.js

@@ -436,24 +436,21 @@ function create_transition(dom, init, direction, effect) {
  dispatch_event(dom, 'outrostart');
  if (needs_reverse) {
  const payload = transition.p;
- const current_animation = /** @type {Animation} */ (animation);
  // If we are working with CSS animations, then before we call reverse, we also need to ensure
  // that we reverse the easing logic. To do this we need to re-create the keyframes so they're
  // in reverse with easing properly reversed too.
  if (
  payload !== null &&
  payload.css !== undefined &&
- current_animation.playState === 'idle'
+ /** @type {Animation} */ (animation).effect != null
  ) {
  const duration = payload.duration ?? 300;
  const css_fn = payload.css;
  const easing_fn = payload.easing || linear;
  const keyframes = create_keyframes(easing_fn, css_fn, duration, direction, true);
- const effect = current_animation.effect;
- if (effect !== null) {
- // @ts-ignore
- effect.setKeyframes(keyframes);
- }
+ // @ts-ignore
+ animation.effect.setKeyframes(keyframes);
+ animation.currentTime = duration;
  }
  /** @type {Animation | TickAnimation} */ (animation).reverse();
  } else {

packages/svelte/tests/animation-helpers.js

@@ -53,18 +53,11 @@ class Animation {
  this.onfinish = () => {};
  this.pending = true;
  this.currentTime = 0;
- this.playState = 'running';
- this.effect = {
- setKeyframes: (/** @type {Keyframe[]} */ keyframes) => {
- this.#keyframes = keyframes;
- }
- };
  }
 
  play() {
  this.#paused = false;
  raf.animations.add(this);
- this.playState = 'running';
  this._update();
  }
 
@@ -118,7 +111,6 @@ class Animation {
  if (this.#reversed) {
  raf.animations.delete(this);
  }
- this.playState = 'idle';
  }
 
  cancel() {
@@ -130,7 +122,6 @@ class Animation {
 
  pause() {
  this.#paused = true;
- this.playState = 'paused';
  }
 
  reverse() {
@@ -139,7 +130,6 @@ class Animation {
  }
  this.#timeline_offset = this.currentTime;
  this.#reversed = !this.#reversed;
- this.playState = 'running';
  }
 }
 

packages/svelte/tests/runtime-legacy/samples/class-shortcut-with-transition/_config.js

@@ -18,7 +18,7 @@ export default test({
  raf.tick(150);
  assert.htmlEqual(
  target.innerHTML,
- '<p>foo</p><p class="red svelte-1yszte8 border" style="overflow: hidden; opacity: 0; border-top-width: 0.5000600024000317px; border-bottom-width: 0.5000600024000317px;">bar</p>'
+ '<p>foo</p><p class="red svelte-1yszte8 border" style="overflow: hidden; opacity: 0; border-top-width: 3.4999399975999683px; border-bottom-width: 3.4999399975999683px;">bar</p>'
  );
  component.open = true;
  raf.tick(250);