support animation

src/compiler/compile/compiler_errors.ts

@@ -238,10 +238,6 @@ export default {
 		code: 'invalid-animation',
 		message: 'An element that uses the animate directive must be the sole child of a keyed each block'
 	},
-	invalid_animation_dynamic_element: {
-		code: 'invalid-animation',
-		message: '<svelte:element> cannot have a animate directive'
-	},
 	invalid_directive_value: {
 		code: 'invalid-directive-value',
 		message: 'Can only bind to an identifier (e.g. `foo`) or a member expression (e.g. `foo.bar` or `foo[baz]`)'

src/compiler/compile/nodes/Element.ts

@@ -261,9 +261,6 @@ export default class Element extends Node {
 		this.scope = scope;
 		this.children = map_children(component, this, this.scope, info.children);
 
-		if (this.is_dynamic_element()) {
-			this.validate_dynamic_element(info);
-		}
 		this.validate();
 
 		this.optimise();
@@ -271,14 +268,6 @@ export default class Element extends Node {
 		component.apply_stylesheet(this);
 	}
 
-	validate_dynamic_element(info: TemplateNode) {
-		info.attributes.forEach(node => {
-			if (node.type === 'Animation') {
-				this.component.error(node, compiler_errors.invalid_animation_dynamic_element);
-			}
-		});
-	}
-
 	validate() {
 		if (this.component.var_lookup.has(this.name) && this.component.var_lookup.get(this.name).imported) {
 			this.component.warn(this, compiler_warnings.component_name_lowercase(this.name));

test/runtime/samples/animation-dynamic-element/_config.js

@@ -0,0 +1,57 @@
+export default {
+	props: {
+		things: [
+			{ id: 1, name: 'a' },
+			{ id: 2, name: 'b' },
+			{ id: 3, name: 'c' },
+			{ id: 4, name: 'd' },
+			{ id: 5, name: 'e' }
+		]
+	},
+
+	html: `
+		<div>a</div>
+		<div>b</div>
+		<div>c</div>
+		<div>d</div>
+		<div>e</div>
+	`,
+
+	test({ assert, component, target, raf }) {
+		let divs = target.querySelectorAll('div');
+		divs.forEach(div => {
+			div.getBoundingClientRect = function() {
+				const index = [...this.parentNode.children].indexOf(this);
+				const top = index * 30;
+
+				return {
+					left: 0,
+					right: 100,
+					top,
+					bottom: top + 20
+				};
+			};
+		});
+
+		component.things = [
+			{ id: 5, name: 'e' },
+			{ id: 2, name: 'b' },
+			{ id: 3, name: 'c' },
+			{ id: 4, name: 'd' },
+			{ id: 1, name: 'a' }
+		];
+
+		divs = target.querySelectorAll('div');
+		assert.ok(~divs[0].style.animation.indexOf('__svelte'));
+		assert.equal(divs[1].style.animation, '');
+		assert.equal(divs[2].style.animation, '');
+		assert.equal(divs[3].style.animation, '');
+		assert.ok(~divs[4].style.animation.indexOf('__svelte'));
+
+		raf.tick(100);
+		assert.deepEqual([
+			divs[0].style.animation,
+			divs[4].style.animation
+		], ['', '']);
+	}
+};

test/runtime/samples/animation-dynamic-element/main.svelte

@@ -1,8 +1,6 @@
 <script>
-	let tag = 'div';
+	let tag = "div"
-	let things = [
+	export let things;
-		{ id: 1, name: 'a' },
-	];
 
 	function flip(node, animation, params) {
 		const dx = animation.from.left - animation.to.left;
@@ -16,5 +14,5 @@
 </script>
 
 {#each things as thing (thing.id)}
-	<svelte:element this={tag} animate:flip></svelte:element>
+	<svelte:element this={tag} animate:flip>{thing.name}</svelte:element>
 {/each}

test/runtime/samples/dynamic-element-animation-invalid/_config.js

@@ -1,3 +0,0 @@
-export default {
-	error: '<svelte:element> cannot have a animate directive'
-};