diff --git a/.changeset/cold-cups-act.md b/.changeset/cold-cups-act.md new file mode 100644 index 0000000000..6776d4eef3 --- /dev/null +++ b/.changeset/cold-cups-act.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: Make Tween duration 0 set current to target immediately diff --git a/packages/svelte/src/motion/tweened.js b/packages/svelte/src/motion/tweened.js index 8aaefe5a2c..36d32d1f72 100644 --- a/packages/svelte/src/motion/tweened.js +++ b/packages/svelte/src/motion/tweened.js @@ -230,9 +230,6 @@ export class Tween { set(value, options) { set(this.#target, value); - let previous_task = this.#task; - - let started = false; let { delay = 0, duration = 400, @@ -240,10 +237,18 @@ export class Tween { interpolate = get_interpolator } = { ...this.#defaults, ...options }; + if (duration === 0) { + this.#task?.abort(); + set(this.#current, value); + return Promise.resolve(); + } + const start = raf.now() + delay; /** @type {(t: number) => T} */ let fn; + let started = false; + let previous_task = this.#task; this.#task = loop((now) => { if (now < start) { diff --git a/packages/svelte/tests/motion/test.ts b/packages/svelte/tests/motion/test.ts index b6554e5e56..7d845bac3d 100644 --- a/packages/svelte/tests/motion/test.ts +++ b/packages/svelte/tests/motion/test.ts @@ -2,7 +2,7 @@ import '../helpers.js'; // for the matchMedia polyfill import { describe, it, assert } from 'vitest'; import { get } from 'svelte/store'; -import { spring, tweened } from 'svelte/motion'; +import { spring, tweened, Tween } from 'svelte/motion'; describe('motion', () => { describe('spring', () => { @@ -39,4 +39,20 @@ describe('motion', () => { assert.equal(get(size), 20); }); }); + + describe('Tween', () => { + it('sets immediately when duration is 0', () => { + const size = new Tween(0); + + size.set(100, { duration: 0 }); + assert.equal(size.current, 100); + }); + }); + + it('updates correctly when initialized with a `null`-ish value', () => { + const size = new Tween(undefined as unknown as number, { duration: 0 }); + + size.set(10); + assert.equal(size.current, 10); + }); });