animate dynamic list items

[rendomnet]

How can I animate dynamic list items.
with enter and leave animations.

this method is not working.

<transition v-motion="'cube'" :css="false" @leave="(_, done) => motions.cube.leave(done)">
    <ul class="tasksContainer" v-if="list.length" :style="todoHeight">
      <li
        v-for="(value, key) in list"
        :key="value.id"
        v-motion
        :initial="{
          opacity: 0,
          transform: 'scale(0)',
        }"
        :enter="{
          opacity: 1,
          transform: 'scale(1)',
          transition: {
            type: 'spring',
            stiffness: '50',
            mass: 0.5,
          },
        }"
        :leave="{
          opacity: 0,
          transform: 'translateX(-50%)',
          transition: {
            type: 'spring',
            stiffness: '50',
            mass: 0.5,
          },
        }"

[Tahul]

Hello,

Could you point to an example of the thing you want to implement precisely?

I've been using v-motion with v-for and it works fine.

As this issue is pretty old, I am closing it, but feel free to re-open if you still have the problem.

[KeroZhai]

Hello,

Could you point to an example of the thing you want to implement precisely?

I've been using v-motion with v-for and it works fine.

As this issue is pretty old, I am closing it, but feel free to re-open if you still have the problem.

Could you please provide a demo? I'm not sure if I am using it the right way...