Vue.js<Transition> apply CSS classes khi element enter/leave:
vue
<Transition name="fade">
<p v-if="show">Hello</p>
</Transition>css
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }<TransitionGroup> cho list animations — thêm move class:
vue
<TransitionGroup name="list" tag="ul">
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</TransitionGroup>Modes: mode="out-in" (old leaves trước, new enters sau) — tránh flickering khi swap components.