midVue.js
How does Vue's 'Transition' system work internally?
Updated May 4, 2026
Short answer
The <Transition> component applies CSS classes or executes JavaScript hooks based on the component's entry/exit from the DOM.
Deep explanation
Vue detects when an element inside a <Transition> is being inserted or removed. It then automatically sniffs the element's CSS transitions or animations and adds/removes specific classes (like v-enter-active, v-leave-to) at the exact frame required to trigger the animation.
Real-world example
Smoothly fading in elements as they are added to a list or sliding a sidebar menu into view.
Common mistakes
- Forgetting that `<Transition>` only handles a single element or component (use `<TransitionGroup>` for lists).
Follow-up questions
- What is the 'mode' attribute in Transition?