What is the Vue transition system?
Why Interviewers Ask This
Interviewers use this question to quickly assess whether a candidate has the foundational knowledge required for Vue.js development. It reveals whether you understand the building blocks that more complex concepts rely on.
Answer
Vue's built-in Transition and TransitionGroup components provide animation and transition effects when elements are inserted, updated, or removed. <Transition> component: wraps a single element that toggles with v-if/v-show or dynamic components. Vue automatically applies CSS classes at different transition stages: v-enter-from (initial state), v-enter-active (while entering), v-enter-to (end state), v-leave-from, v-leave-active, v-leave-to. Example: <Transition name="fade"><div v-if="show">Content</div></Transition>. CSS: .fade-enter-active, .fade-leave-active { transition: opacity 0.3s; } .fade-enter-from, .fade-leave-to { opacity: 0; }. The name prefix ("fade") matches the transition name attribute. Custom transition classes: specify classes for third-party animation libraries (Animate.css): <Transition enter-active-class="animate__animated animate__fadeIn">. JavaScript hooks: use @enter, @leave, @after-enter hooks for programmatic animations (GSAP, Web Animations API). <TransitionGroup>: for animating v-for lists. Renders as a <ul> or other element by default. Adds v-move class for elements that change position (smooth reordering with FLIP technique). appear: add appear attribute for transition on initial render: <Transition appear>. KeepAlive transitions: onActivated/onDeactivated hooks fire instead of onMounted/onUnmounted.
Pro Tip
Back up your answer with a specific project or situation. Saying 'In my last Vue.js project, I used this when...' immediately makes your answer more credible and memorable.