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•2y ago

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

CDLOP•2y ago

b1mind•2y ago

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

CDLOP•2y ago

I see

Jochem•2y ago

I am legitimately laughing out loud at that title

b1mind•2y ago

https://svelte.dev/examples/animate

Svelte examples

Cybernetically enhanced web apps

CDLOP•2y ago

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

b1mind•2y 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•2y 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•2y ago

can you share in a repl?

CDLOP•2y ago

lemme try that sandbox

b1mind•2y ago

or at least the github

CDLOP•2y ago

Try this

message.txt

b1mind•2y 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•2y ago

the hell do I use this thing

b1mind•2y ago

lol which

CDLOP•2y ago

the repl just says its loading

b1mind•2y ago

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

CDLOP•2y ago

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

b1mind•2y 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•2y ago

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

b1mind•2y ago

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

CDLOP•2y ago

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

b1mind•2y ago

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

CDLOP•2y 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•2y ago

yea should be a button

CDLOP•2y ago

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

b1mind•2y ago

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

CDLOP•2y ago

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

b1mind•2y 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•2y ago

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

b1mind•2y ago

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

CDLOP•2y 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•2y 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•2y ago

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

b1mind•2y 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•2y 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•2y 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•2y ago

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

CDLOP•2y 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•2y 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•2y 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?