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.