b1, can't use animate inside an each block?

🤣

    <ul>
        {#each todos as todo, index}
            <div class="li-box">
                <input class="ui-checkbox" bind:checked={todo.completed} type="checkbox" />
                <span class="li-text" class:checked={todo.completed}>{todo.text}</span>
                <span class="edit-btn" on:click={() => editTodo(index)}>✏️</span>
                <span animate:flip class="delete-btn" on:click={() => removeTodo(index)}>❌</span>
            </div>
        {/each}
    </ul>

    <ul>
        {#each todos as todo, index}
            <div class="li-box">
                <input class="ui-checkbox" bind:checked={todo.completed} type="checkbox" />
                <span class="li-text" class:checked={todo.completed}>{todo.text}</span>
                <span class="edit-btn" on:click={() => editTodo(index)}>✏️</span>
                <span animate:flip class="delete-btn" on:click={() => removeTodo(index)}>❌</span>
            </div>
        {/each}
    </ul>

42 Replies

b1mind•15mo ago

lol you dork you cannot use FLIP without a key'd each block

CDLOP•15mo ago

b1mind•15mo ago

it has to know the first order and last it can only know that if each one has a id

CDLOP•15mo ago

I see

Jochem•15mo ago

I am legitimately laughing out loud at that title

b1mind•15mo ago

https://svelte.dev/examples/animate

Svelte examples

Cybernetically enhanced web apps

CDLOP•15mo ago

ok so transition works fine, it's just an animate issue

b1mind•15mo ago

wait that example is odd imo

    {#each sortTodos as todo (todo.id)}
      <div class="task" animate:flip={{ duration: 350 }} transition:fly={{ x: 50, duration: 350 }}>

    {#each sortTodos as todo (todo.id)}
      <div class="task" animate:flip={{ duration: 350 }} transition:fly={{ x: 50, duration: 350 }}>

that is basically what I do in my todo it just needs the (todo.id) t

CDLOP•15mo ago

ehh, so I gotta try change this around then, hmm lemme try oh yeah but transition works fine, it's animate that breaks for me

b1mind•15mo ago

can you share in a repl?

CDLOP•15mo ago

lemme try that sandbox

b1mind•15mo ago

or at least the github

CDLOP•15mo ago

Try this

message.txt

b1mind•15mo ago

Freaking love I got them to add Vim motions codesandbox? ntvm xD They lost my love, nothing but frustration use the repl or sveltelab/stackblitz https://svelte.dev/repl/hello-world?version=4.2.3?vim=true err take off vim=true xD sorry defaulted (or tell it false lol)

CDLOP•15mo ago

the hell do I use this thing

b1mind•15mo ago

lol which

CDLOP•15mo ago

the repl just says its loading

b1mind•15mo ago

reload? https://svelte.dev/repl/ or just try that link no version/vim SvelteLabs you might have to whitelist stackblitz

CDLOP•15mo ago

ugh hold on lemme try log in, bloody thing is bugging out BARE WITH

b1mind•15mo ago

ooh sorry I didn't past it all did I you need to give the id="{todo.id}" too so it knows what to animate xd

CDLOP•15mo ago

https://www.sveltelab.dev/52t5d1m1cfq47m7 doesnt work but the code s there

b1mind•15mo ago

edit in an alert eh >.>;; <input id="{todo.id}" class="ui-checkbox" bind:checked={todo.completed} type="checkbox" />

CDLOP•15mo ago

don't judge me. (you can judge me it's fine)

b1mind•15mo ago

I will sorry xD haha getting the same a11y errors I am 2 years ago I didn't trust buttons ig

CDLOP•15mo ago

I didn't know how else to do it tbh, I'd prefer if I could just edit the span lol yeah 'coz of span

b1mind•15mo ago

yea should be a button

CDLOP•15mo ago

I can fix it with some code, but it's whatever anyway this still doesn't work, hmm

b1mind•15mo ago

I mean the code I'm looking at does not even have the FLIP imported or assigned so idk

CDLOP•15mo ago

oh hold on https://www.sveltelab.dev/52t5d1m1cfq47m7

b1mind•15mo ago

better at least have the proper error now

An element that uses the animate directive must be the immediate child of a keyed each block

not sure what but you had the flip on one the spans you need it on the whole parent <div class="li-box" animate:flip>

CDLOP•15mo ago

hmmm no error but it does nothing i only wanted it on the delete button, interesting span*

b1mind•15mo ago

why only on the del? idk how you would FLIP that xD

CDLOP•15mo ago

you're right I just wanted it to flip the list if I click delete, basically though I'm just testing it out to see what it does, how it works, etc etc

b1mind•15mo ago

make sure you understand what it does first. It would work on any change to the list so adding it would FLIP or deleting (ordering too).

CDLOP•15mo ago

I must've skipped some of the tutorial didn't know the key blocks etc

b1mind•15mo ago

I mean FLIP is not just Svelte its a technique that is just sveltes implementation of it. Like GSAP.Flip works different. Right but that is what I mean you probably don't understand FLIP and why it would need the key

b1mind•15mo ago

https://css-tricks.com/animating-layouts-with-the-flip-technique/

David Khourshid

CSS-Tricks

Animating Layouts with the FLIP Technique | CSS-Tricks

User interfaces are most effective when they are intuitive and easily understandable to the user. Animation plays a major role in this - as Nick Babich said,

CDLOP•15mo ago

yeah absolutely transition works well and I understand that, I'll go through animate some more befoer I start dicking around with it

b1mind•15mo ago

idk if that article will help any but gives a deep overview of the technique

CDLOP•15mo ago

yeh in:fly out:fade is perfect for now, that's what I was after, lemme look into FLIP I think I'd use transitions more than animate but lemme research it, thanks for the help again b1 😛 out of curiosity, which one do you use more often than not?

b1mind•15mo ago

eh? I use all the things xD Also I use GSAP in most my stuff so just depends what I need. I'll use it

CDLOP•15mo ago

fair enough anyway let's not sidetrack this one. BACK TO GENERAL!

Gaming

Programming

b1, can't use animate inside an each block?

Did you find this page helpful?