fix repeated animations (#2098)

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