diff --git a/src/compile/render-dom/wrappers/Element/index.ts b/src/compile/render-dom/wrappers/Element/index.ts index 33b5d5b7d7..5faf174ad1 100644 --- a/src/compile/render-dom/wrappers/Element/index.ts +++ b/src/compile/render-dom/wrappers/Element/index.ts @@ -770,7 +770,7 @@ export default class ElementWrapper extends Wrapper { block.builders.animate.addBlock(deindent` ${stop_animation}(); - ${stop_animation} = @animate(${this.var}, ${rect}, ${name}, ${params}); + ${stop_animation} = @create_animation(${this.var}, ${rect}, ${name}, ${params}); `); } diff --git a/src/internal/animations.js b/src/internal/animations.js index 8f65a268db..912e3d5516 100644 --- a/src/internal/animations.js +++ b/src/internal/animations.js @@ -2,11 +2,11 @@ import { identity as linear, noop } from './utils.js'; import { loop } from './loop.js'; import { create_rule, delete_rule } from './style_manager.js'; -export function animate(node, from, fn, params) { - if (!from) return; +export function create_animation(node, from, fn, params) { + if (!from) return noop; const to = node.getBoundingClientRect(); - if (from.left === to.left && from.right === to.right && from.top === to.top && from.bottom === to.bottom) return; + if (from.left === to.left && from.right === to.right && from.top === to.top && from.bottom === to.bottom) return noop; const { delay = 0, diff --git a/test/js/samples/each-block-keyed-animated/expected.js b/test/js/samples/each-block-keyed-animated/expected.js index c4efd2e953..907f7b88f4 100644 --- a/test/js/samples/each-block-keyed-animated/expected.js +++ b/test/js/samples/each-block-keyed-animated/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, animate, append, blankObject, createComment, createElement, createText, detachNode, fixAndOutroAndDestroyBlock, fix_position, flush, init, insert, noop, safe_not_equal, setData, updateKeyedEach } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, blankObject, createComment, createElement, createText, create_animation, detachNode, fixAndOutroAndDestroyBlock, fix_position, flush, init, insert, noop, safe_not_equal, setData, updateKeyedEach } from "svelte/internal"; function get_each_context(ctx, list, i) { const child_ctx = Object.create(ctx); @@ -44,7 +44,7 @@ function create_each_block(key_1, ctx) { a() { stop_animation(); - stop_animation = animate(div, rect, foo, {}); + stop_animation = create_animation(div, rect, foo, {}); }, d(detach) { diff --git a/test/runtime/samples/animation-js/_config.js b/test/runtime/samples/animation-js/_config.js index a31825c3f9..d5991a915a 100644 --- a/test/runtime/samples/animation-js/_config.js +++ b/test/runtime/samples/animation-js/_config.js @@ -31,7 +31,7 @@ export default { bottom: top + 20 } }; - }) + }); component.things = [ { id: 5, name: 'e' }, @@ -52,5 +52,26 @@ export default { raf.tick(100); assert.equal(divs[0].dy, 0); assert.equal(divs[4].dy, 0); + + component.things = [ + { id: 1, name: 'a' }, + { id: 2, name: 'b' }, + { id: 3, name: 'c' }, + { id: 4, name: 'd' }, + { id: 5, name: 'e' } + ]; + + divs = document.querySelectorAll('div'); + + assert.equal(divs[0].dy, 120); + assert.equal(divs[4].dy, -120); + + raf.tick(150); + assert.equal(divs[0].dy, 60); + assert.equal(divs[4].dy, -60); + + raf.tick(200); + assert.equal(divs[0].dy, 0); + assert.equal(divs[4].dy, 0); } }; \ No newline at end of file