mirror of https://github.com/sveltejs/svelte
commit
45f88ade2c
@ -0,0 +1,18 @@
|
|||||||
|
import Node from './shared/Node';
|
||||||
|
import Expression from './shared/Expression';
|
||||||
|
|
||||||
|
export default class Animation extends Node {
|
||||||
|
type: 'Animation';
|
||||||
|
name: string;
|
||||||
|
expression: Expression;
|
||||||
|
|
||||||
|
constructor(compiler, parent, scope, info) {
|
||||||
|
super(compiler, parent, scope, info);
|
||||||
|
|
||||||
|
this.name = info.name;
|
||||||
|
|
||||||
|
this.expression = info.expression
|
||||||
|
? new Expression(compiler, this, scope, info.expression)
|
||||||
|
: null;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,21 @@
|
|||||||
|
import checkForDupes from '../utils/checkForDupes';
|
||||||
|
import checkForComputedKeys from '../utils/checkForComputedKeys';
|
||||||
|
import { Validator } from '../../index';
|
||||||
|
import { Node } from '../../../interfaces';
|
||||||
|
|
||||||
|
export default function transitions(validator: Validator, prop: Node) {
|
||||||
|
if (prop.value.type !== 'ObjectExpression') {
|
||||||
|
validator.error(prop, {
|
||||||
|
code: `invalid-transitions-property`,
|
||||||
|
message: `The 'transitions' property must be an object literal`
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
checkForDupes(validator, prop.value.properties);
|
||||||
|
checkForComputedKeys(validator, prop.value.properties);
|
||||||
|
|
||||||
|
prop.value.properties.forEach(() => {
|
||||||
|
// TODO probably some validation that can happen here...
|
||||||
|
// checking for use of `this` etc?
|
||||||
|
});
|
||||||
|
}
|
@ -0,0 +1,3 @@
|
|||||||
|
{#each things as thing (thing)}
|
||||||
|
<div animate:flip>flips</div>
|
||||||
|
{/each}
|
@ -0,0 +1,59 @@
|
|||||||
|
{
|
||||||
|
"html": {
|
||||||
|
"start": 0,
|
||||||
|
"end": 70,
|
||||||
|
"type": "Fragment",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"start": 0,
|
||||||
|
"end": 70,
|
||||||
|
"type": "EachBlock",
|
||||||
|
"expression": {
|
||||||
|
"type": "Identifier",
|
||||||
|
"start": 7,
|
||||||
|
"end": 13,
|
||||||
|
"name": "things"
|
||||||
|
},
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"start": 33,
|
||||||
|
"end": 62,
|
||||||
|
"type": "Element",
|
||||||
|
"name": "div",
|
||||||
|
"attributes": [
|
||||||
|
{
|
||||||
|
"start": 38,
|
||||||
|
"end": 50,
|
||||||
|
"type": "Animation",
|
||||||
|
"name": "flip",
|
||||||
|
"expression": null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"start": 51,
|
||||||
|
"end": 56,
|
||||||
|
"type": "Text",
|
||||||
|
"data": "flips"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"context": {
|
||||||
|
"start": 17,
|
||||||
|
"end": 22,
|
||||||
|
"type": "Identifier",
|
||||||
|
"name": "thing"
|
||||||
|
},
|
||||||
|
"key": {
|
||||||
|
"type": "Identifier",
|
||||||
|
"start": 24,
|
||||||
|
"end": 29,
|
||||||
|
"name": "thing"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"css": null,
|
||||||
|
"js": null
|
||||||
|
}
|
@ -0,0 +1,62 @@
|
|||||||
|
export default {
|
||||||
|
data: {
|
||||||
|
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, window, raf) {
|
||||||
|
let divs = document.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
|
||||||
|
}
|
||||||
|
};
|
||||||
|
})
|
||||||
|
|
||||||
|
const bcr1 = divs[0].getBoundingClientRect();
|
||||||
|
const bcr2 = divs[4].getBoundingClientRect();
|
||||||
|
|
||||||
|
component.set({
|
||||||
|
things: [
|
||||||
|
{ id: 5, name: 'e' },
|
||||||
|
{ id: 2, name: 'b' },
|
||||||
|
{ id: 3, name: 'c' },
|
||||||
|
{ id: 4, name: 'd' },
|
||||||
|
{ id: 1, name: 'a' }
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
divs = document.querySelectorAll('div');
|
||||||
|
assert.ok(~divs[0].style.animation.indexOf('__svelte'));
|
||||||
|
assert.equal(divs[1].style.animation, undefined);
|
||||||
|
assert.equal(divs[2].style.animation, undefined);
|
||||||
|
assert.equal(divs[3].style.animation, undefined);
|
||||||
|
assert.ok(~divs[4].style.animation.indexOf('__svelte'));
|
||||||
|
|
||||||
|
raf.tick(100);
|
||||||
|
assert.deepEqual([
|
||||||
|
divs[0].style.animation,
|
||||||
|
divs[4].style.animation
|
||||||
|
], ['', '']);
|
||||||
|
}
|
||||||
|
};
|
@ -0,0 +1,19 @@
|
|||||||
|
{#each things as thing (thing.id)}
|
||||||
|
<div animate:flip>{thing.name}</div>
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
animations: {
|
||||||
|
flip(node, animation, params) {
|
||||||
|
const dx = animation.from.left - animation.to.left;
|
||||||
|
const dy = animation.from.top - animation.to.top;
|
||||||
|
|
||||||
|
return {
|
||||||
|
duration: 100,
|
||||||
|
css: (t, u) => `transform: translate(${u + dx}px, ${u * dy}px)`
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
@ -0,0 +1,61 @@
|
|||||||
|
export default {
|
||||||
|
data: {
|
||||||
|
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, window, raf) {
|
||||||
|
let divs = document.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
|
||||||
|
}
|
||||||
|
};
|
||||||
|
})
|
||||||
|
|
||||||
|
const bcr1 = divs[0].getBoundingClientRect();
|
||||||
|
const bcr2 = divs[4].getBoundingClientRect();
|
||||||
|
|
||||||
|
component.set({
|
||||||
|
things: [
|
||||||
|
{ id: 5, name: 'e' },
|
||||||
|
{ id: 2, name: 'b' },
|
||||||
|
{ id: 3, name: 'c' },
|
||||||
|
{ id: 4, name: 'd' },
|
||||||
|
{ id: 1, name: 'a' }
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
divs = document.querySelectorAll('div');
|
||||||
|
assert.equal(divs[0].dy, 120);
|
||||||
|
assert.equal(divs[4].dy, -120);
|
||||||
|
|
||||||
|
raf.tick(50);
|
||||||
|
assert.equal(divs[0].dy, 60);
|
||||||
|
assert.equal(divs[4].dy, -60);
|
||||||
|
|
||||||
|
raf.tick(100);
|
||||||
|
assert.equal(divs[0].dy, 0);
|
||||||
|
assert.equal(divs[4].dy, 0);
|
||||||
|
}
|
||||||
|
};
|
@ -0,0 +1,22 @@
|
|||||||
|
{#each things as thing (thing.id)}
|
||||||
|
<div animate:flip>{thing.name}</div>
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
animations: {
|
||||||
|
flip(node, animation, params) {
|
||||||
|
const dx = animation.from.left - animation.to.left;
|
||||||
|
const dy = animation.from.top - animation.to.top;
|
||||||
|
|
||||||
|
return {
|
||||||
|
duration: 100,
|
||||||
|
tick: (t, u) => {
|
||||||
|
node.dx = u * dx;
|
||||||
|
node.dy = u * dy;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
@ -0,0 +1,15 @@
|
|||||||
|
[{
|
||||||
|
"code": "duplicate-animation",
|
||||||
|
"message": "An element can only have one 'animate' directive",
|
||||||
|
"start": {
|
||||||
|
"line": 2,
|
||||||
|
"column": 18,
|
||||||
|
"character": 50
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 2,
|
||||||
|
"column": 29,
|
||||||
|
"character": 61
|
||||||
|
},
|
||||||
|
"pos": 50
|
||||||
|
}]
|
@ -0,0 +1,17 @@
|
|||||||
|
{#each things as thing (thing)}
|
||||||
|
<div animate:foo animate:bar></div>
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
animations: {
|
||||||
|
foo(node, animation, params) {
|
||||||
|
// ...
|
||||||
|
},
|
||||||
|
|
||||||
|
bar(node, animation, params) {
|
||||||
|
// ...
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
@ -0,0 +1,15 @@
|
|||||||
|
[{
|
||||||
|
"code": "missing-animation",
|
||||||
|
"message": "Missing animation 'foo'",
|
||||||
|
"start": {
|
||||||
|
"line": 2,
|
||||||
|
"column": 6,
|
||||||
|
"character": 38
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 2,
|
||||||
|
"column": 17,
|
||||||
|
"character": 49
|
||||||
|
},
|
||||||
|
"pos": 38
|
||||||
|
}]
|
@ -0,0 +1,3 @@
|
|||||||
|
{#each things as thing (thing)}
|
||||||
|
<div animate:foo></div>
|
||||||
|
{/each}
|
@ -0,0 +1,15 @@
|
|||||||
|
[{
|
||||||
|
"code": "invalid-animation",
|
||||||
|
"message": "An element that use the animate directive must be the immediate child of a keyed each block",
|
||||||
|
"start": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 5,
|
||||||
|
"character": 5
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 16,
|
||||||
|
"character": 16
|
||||||
|
},
|
||||||
|
"pos": 5
|
||||||
|
}]
|
@ -0,0 +1,11 @@
|
|||||||
|
<div animate:foo></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
animations: {
|
||||||
|
foo(node, animation, params) {
|
||||||
|
// ...
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
@ -0,0 +1,15 @@
|
|||||||
|
[{
|
||||||
|
"code": "invalid-animation",
|
||||||
|
"message": "An element that use the animate directive must be the immediate child of a keyed each block",
|
||||||
|
"start": {
|
||||||
|
"line": 2,
|
||||||
|
"column": 6,
|
||||||
|
"character": 30
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 2,
|
||||||
|
"column": 17,
|
||||||
|
"character": 41
|
||||||
|
},
|
||||||
|
"pos": 30
|
||||||
|
}]
|
@ -0,0 +1,14 @@
|
|||||||
|
{#each things as thing}
|
||||||
|
<div animate:foo></div>
|
||||||
|
<div animate:foo></div>
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
animations: {
|
||||||
|
foo(node, animation, params) {
|
||||||
|
// ...
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
@ -0,0 +1,15 @@
|
|||||||
|
[{
|
||||||
|
"code": "invalid-animation",
|
||||||
|
"message": "An element that use the animate directive must be the sole child of a keyed each block",
|
||||||
|
"start": {
|
||||||
|
"line": 2,
|
||||||
|
"column": 6,
|
||||||
|
"character": 38
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 2,
|
||||||
|
"column": 17,
|
||||||
|
"character": 49
|
||||||
|
},
|
||||||
|
"pos": 38
|
||||||
|
}]
|
@ -0,0 +1,14 @@
|
|||||||
|
{#each things as thing (thing)}
|
||||||
|
<div animate:foo></div>
|
||||||
|
<div animate:foo></div>
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
animations: {
|
||||||
|
foo(node, animation, params) {
|
||||||
|
// ...
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
Loading…
Reference in new issue