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,
          },
        }"