Setting the file. One moment.
Subchapter 14.11
references/component-transition.mdMarkdown3 KBView on GitHub
Impact: MEDIUM - <Transition> animates entering/leaving of a single element or component. It is ideal for toggling UI states, swapping views, or animating one component at a time.
<Transition>key when switching between same element typesmode="out-in" when you need sequential swapstransform and opacity for smooth animations<Transition> only supports one direct child. Wrap multiple nodes in a single element or component.
BAD:
<template>
<Transition name="fade">
<h3>Title</h3>
<p>Description</p>
</Transition>
</template>GOOD:
<template>
<Transition name="fade">
<div>
<h3>Title</h3>
<p>Description</p>
</div>
</Transition>
</template>Vue reuses the same DOM element when the tag type does not change. Add key so Vue treats it as a new element and triggers enter/leave.
BAD:
<template>
<Transition name="fade">
<p v-if="isActive">Active</p>
<p v-else>Inactive</p>
</Transition>
</template>GOOD:
<template>
<Transition name="fade" mode="out-in">
<p v-if="isActive" key="active">Active</p>
<p v-else key="inactive">Inactive</p>
</Transition>
</template>When swapping components or views, use mode="out-in" to prevent both from being visible at the same time.
BAD:
<template>
<Transition name="fade">
<component :is="currentView" />
</Transition>
</template>GOOD:
<template>
<Transition name="fade" mode="out-in">
<component :is="currentView" :key="currentView" />
</Transition>
</template>Avoid layout-triggering properties such as height, margin, or top. Use transform and opacity for smooth, GPU-friendly transitions.
BAD:
.slide-enter-active,
.slide-leave-active {
transition: height 0.3s ease;
}
.slide-enter-from,
.slide-leave-to {
height: 0;
}GOOD:
.slide-enter-active,
.slide-leave-active {
transition: transform 0.3s ease, opacity 0.3s ease;
}
.slide-enter-from {
transform: translateX(-12px);
opacity: 0;
}
.slide-leave-to {
transform: translateX(12px);
opacity: 0;
}