From 170f52ab1702d560c81b483b3f9b3035629047c6 Mon Sep 17 00:00:00 2001 From: Richard Harris Date: Sat, 16 Mar 2019 17:01:48 -0400 Subject: [PATCH 1/2] fix repeated animations (#2098) --- .../render-dom/wrappers/Element/index.ts | 2 +- src/internal/animations.js | 6 ++--- test/runtime/samples/animation-js/_config.js | 23 ++++++++++++++++++- 3 files changed, 26 insertions(+), 5 deletions(-) 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/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 From bd4d561feccd95a19c3e39d8b357adfa5c7b55b5 Mon Sep 17 00:00:00 2001 From: Richard Harris Date: Sat, 16 Mar 2019 17:37:53 -0400 Subject: [PATCH 2/2] update test --- test/js/samples/each-block-keyed-animated/expected.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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) {