Intermediate LevelVue JS
How does <TransitionGroup> apply FLIP animations to list item reordering in Vue?
❓ Interview Prompt: Explain FLIP animation technique (First, Last, Invert, Play), <TransitionGroup> list movement, and .v-move CSS class.
When list items rendered with 'v-for' are shuffled or reordered, standard transitions only animate items entering or leaving.
FLIP Animations in '<TransitionGroup>':
'<TransitionGroup>' uses the FLIP (First, Last, Invert, Play) animation technique to smoothly animate items sliding into new positions:
1
Calculates item positions before and after reordering.
2
Applies a transform to invert items back to their starting position.
3
Smoothly animates transforms to zero using the '.v-move' (or '.list-move') CSS class!
Code Implementation Example
html
<template>
<TransitionGroup name="list" tag="ul">
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
</TransitionGroup>
</template>
<style scoped>
/* .list-move applies FLIP transition when items change position! */
.list-move, .list-enter-active, .list-leave-active {
transition: all 0.5s ease;
}
.list-leave-active {
position: absolute; /* Essential for smooth FLIP calculation! */
}
</style>💡Smooth list reordering FLIP animations using <TransitionGroup> and .list-move.
🎯 Interview Key Takeaway
<TransitionGroup> uses FLIP animations and the .v-move CSS class to smoothly animate reordered list items.
#TransitionGroup#FLIP#Animations#Intermediate
Back to all Vue JS Questions→