<script>
import { flip } from './flip.js';
import { afterUpdate, beforeUpdate, tick } from 'svelte';
let duration = 500;
let isSpring = false;
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
};
let items = [
{ id: 1},
{ id: 2},
{ id: 3},
{ id: 4},
]
function handleClick() {
items = shuffle(items);
}
afterUpdate(async () => {
await tick();
flip.flush();
})
</script>
<div class="container">
{#each items as item (item.id)}
<div use:flip.action={{ duration, spring: isSpring }} class="flipped">{item.id}
</div>