<Transition> component wraps a conditionally rendered element?Consider this Vue 3 code snippet using the <Transition> component:
<template>
<Transition name="fade">
<div v-if="show">Hello</div>
</Transition>
</template>
<script setup>
import { ref } from 'vue'
const show = ref(true)
</script>What is the visible behavior when show changes from true to false?
<template> <Transition name="fade"> <div v-if="show">Hello</div> </Transition> </template> <script setup> import { ref } from 'vue' const show = ref(true) </script>
Think about what the <Transition> component does with elements entering and leaving the DOM.
The <Transition> component applies CSS classes for enter and leave states. When show changes to false, the element fades out smoothly before Vue removes it from the DOM.
<Transition> component?You want to create a fade effect for entering and leaving elements using Vue's <Transition> with name="fade". Which CSS snippet is correct?
Remember Vue uses -enter-active and -leave-active classes for transitions and -from/-to for start/end states.
Option A correctly sets the transition on the active classes and defines opacity 0 at the start of enter and end of leave, with opacity 1 at the end of enter and start of leave.
<Transition> wrapped element off?Given this Vue 3 component:
<template>
<button @click="show = !show">Toggle</button>
<Transition name="slide">
<p v-if="show">Slide me</p>
</Transition>
</template>
<script setup>
import { ref } from 'vue'
const show = ref(true)
</script>After clicking the button to set show to false, what happens to the <p> element in the DOM?
<template> <button @click="show = !show">Toggle</button> <Transition name="slide"> <p v-if="show">Slide me</p> </Transition> </template> <script setup> import { ref } from 'vue' const show = ref(true) </script>
Think about how Vue handles leave transitions with <Transition>.
Vue keeps the element in the DOM during the leave animation, then removes it after the animation finishes.
Look at this Vue 3 code:
<template>
<Transition name="fade">
<div v-if="visible">Content</div>
</Transition>
</template>
<script setup>
import { ref } from 'vue'
const visible = ref(true)
</script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
.fade-enter-to {
opacity: 1;
}
</style>When visible changes from true to false, the element disappears immediately without fading out. Why?
<template> <Transition name="fade"> <div v-if="visible">Content</div> </Transition> </template> <script setup> import { ref } from 'vue' const visible = ref(true) </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; } .fade-enter-from, .fade-leave-to { opacity: 0; } .fade-enter-to { opacity: 1; } </style>
Check if all required CSS classes for enter and leave states are defined.
The leave transition requires .fade-leave-from to define the starting opacity. Without it, the element jumps to opacity 0 immediately, skipping animation.
<Transition> component manage multiple elements leaving simultaneously?When multiple elements inside a <TransitionGroup> leave at the same time, how does Vue ensure smooth animations?
Think about how Vue handles asynchronous animations for multiple elements.
Vue tracks each leaving element individually and waits for its leave animation to finish before removing it from the DOM, allowing smooth simultaneous animations.