mirror of https://github.com/sveltejs/svelte
groundwork for animations (#1431)
parent
6d00f2bf15
commit
98e63b37e9
@ -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,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.to.left - animation.from.left;
|
||||||
|
const dy = animation.to.top - animation.from.top;
|
||||||
|
|
||||||
|
return {
|
||||||
|
duration: 100,
|
||||||
|
tick: (t, u) => {
|
||||||
|
node.dx = u * dx;
|
||||||
|
node.dy = u * dy;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
Loading…
Reference in new issue