CODEWITHSUNDEEP
sveltesvelte-3
oae
oae

Reputation: 1652

Svelte: Out transition in flip animation in grid layout flies off from top left position instead of the item position

Have a simple grid layout in Svelte set up which displays a list of items. A toggle button removes one element from the list, and all other items re-arrange accordingly in animated fashion due the flip animation. However, if i'm adding transitions, the in works perfectly but the out doesn't do what i want. E.g. fade away...

Here the REPL: https://svelte.dev/repl/49b3731e93704af78df857b2aa1f0c71?version=3.21.0

Note: When the 5 is removed, it doesn't fade away, it flies from the 1 position diagonal to the 5 position.

Any idea what am i doing wrong ?

Upvotes: 1

Views: 1007

Answers (1)

Dmytro Cheglakov
Dmytro Cheglakov

Reputation: 744

Try to remove transition: all 1s;. I think this is messing up Svelte inner animations.

Upvotes: 2

Related Questions