mirror of https://github.com/sveltejs/svelte
Rich Harris
6 years ago
committed by
GitHub
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