Beginner LevelVue JS
How do <Transition> and <TransitionGroup> animate DOM insertion and removal?
❓ Interview Prompt: Explain Vue animation components (<Transition>, <TransitionGroup>), CSS transition classes, and list reordering animations.
Vue provides two built-in components for animating DOM elements:
1. '<Transition name="fade">':
Animates a single element or component during 'v-if' / 'v-show' toggles. Automatically applies 6 CSS transition classes during the enter/leave animation lifecycle:
•
'.fade-enter-from', '.fade-enter-active', '.fade-enter-to'
•
'.fade-leave-from', '.fade-leave-active', '.fade-leave-to'
2. '<TransitionGroup name="list">':
Animates lists of elements rendered with 'v-for'. Automatically applies FLIP layout animations (using CSS transforms) when list items are inserted, deleted, or reordered!
Code Implementation Example
html
<template>
<Transition name="fade">
<p v-if="isVisible">Smooth Fade In / Out</p>
</Transition>
</template>
<style scoped>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.4s ease;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
</style>💡Animating element entry and exit using built-in <Transition> and CSS classes.
🎯 Interview Key Takeaway
<Transition> and <TransitionGroup> automatically inject CSS lifecycle classes to animate DOM additions, removals, and reordering.
#Transition#Animation#CSS#Beginner
Back to all Vue JS Questions→