mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
19 lines
402 B
19 lines
402 B
6 years ago
|
{#each things as thing (thing.id)}
|
||
|
<div animate:flip>{thing.name}</div>
|
||
|
{/each}
|
||
|
|
||
|
<script>
|
||
|
export default {
|
||
|
animations: {
|
||
|
flip(node, animation, params) {
|
||
6 years ago
|
const dx = animation.from.left - animation.to.left;
|
||
|
const dy = animation.from.top - animation.to.top;
|
||
6 years ago
|
|
||
|
return {
|
||
|
duration: 100,
|
||
6 years ago
|
css: (t, u) => `transform: translate(${u + dx}px, ${u * dy}px)`
|
||
6 years ago
|
};
|
||
|
}
|
||
|
}
|
||
|
};
|
||
|
</script>
|