Feature request: animation for data insert?

[kayazinc]

Use-case: to highlight (and fade off) whenever new row of data is inserted into the list.

I saw one of the examples is to insert 10 row on top, is it possible to show animation on the data inserted?

Thanks.

[v1ack]

Looks like it's possible. You can make a transition function on top of svelte fade, in which you can determine if current call for new inserted data or for rerendered. Call svelte fade for first case and none for second

[kayazinc]

Great, let me try and ask here for help if i need any. thanks!

[kayazinc]

I tried to place the animation code on the custom ListItem but i believe this is wrong as it cannot differentiate between inserted data and re-rendering (as you have mentioned).

<div class="ListItem" 
  in:fade="{{ duration: 1000 }}" 
  style:color="{color}" 
  <div>{name}</div>
  <div>{address}</div>
</div>

I will try to ask for help in the svelte discord and post my solution there later.

[kayazinc]

At the end of the day, I did a "dirty" workaround, not sure if there are any better way. There are two places to implement: 1/ parent component which hold the virtual list 2/ child component which is the list item

virtual list

• whenever there are new data for insert into virtual list, i will add an attribute clazz to the data.
• based on the attribute clazz, the item will be animated accordingly.
• after animation, the attribute clazz will be removed from the data so that scrolling the virtual list will not re-animate the item.

list item

• it will contain <div class={clazz}>, that is based on attribute clazz in the data, for animation
• then setTimeout(...) to remove the attribute clazz so that it will only be animated once.

Thanks for this virtual-scroll-list library, if there are any cleaner implementation, pls let me know. Cheers!