Merge pull request #2238 from sveltejs/gh-2098

fix repeated animations

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});
 		`);
 	}
 

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,

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) {

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);
 	}
 };