简体   繁体   中英

Lodash shuffle function can't be animated in Vue.js

So, I was unable to make lodash 's shuffle method animate in Vue.js, even though I have copied the code from the documentation...

Shuffle happens, but not with animation. I have tested the animation by actually removing items from the array, and animation works, but when I use shuffle method, it just instantly happens instead of smoothly.

Component:

<transition-group name="list">
 <span class="letter" v-for="(letter, key) in data" :key="key">
    {{ letter }}
 </span>
</transition-group>

What happens when you click "shuffle" button :

 shuffleLetters : function(){
   this.data = shuffle(this.data)
 }

Animation code :

.list-move, /* apply transition to moving elements */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* ensure leaving items are taken out of layout flow so that moving
   animations can be calculated correctly. */
.list-leave-active {
  position: absolute;
}

That's because you use the array index as a :key . Vue won't make a difference between [1, 2, 3] and [2, 3, 1] because the index is generating on the v-for loop, it's not tied to an element.

Try to bind a relevant :key from each element and it should starts animating.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM