1---
2title: Transition Component Best Practices
3impact: MEDIUM
4impactDescription: Transition animates a single element or component; incorrect structure or keys prevent animations
5type: best-practice
6tags: [vue3, transition, animation, performance, keys]
7---
8 
9# Transition Component Best Practices
10 
11**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.
12 
13## Task List
14 
15- Wrap a single element or component inside `<Transition>`
16- Provide a `key` when switching between same element types
17- Use `mode="out-in"` when you need sequential swaps
18- Prefer `transform` and `opacity` for smooth animations
19 
20## Use Transition for a Single Root Element
21 
22`<Transition>` only supports one direct child. Wrap multiple nodes in a single element or component.
23 
24**BAD:**
25```vue
26<template>
27  <Transition name="fade">
28    <h3>Title</h3>
29    <p>Description</p>
30  </Transition>
31</template>
32```
33 
34**GOOD:**
35```vue
36<template>
37  <Transition name="fade">
38    <div>
39      <h3>Title</h3>
40      <p>Description</p>
41    </div>
42  </Transition>
43</template>
44```
45 
46## Force Transitions Between Same Element Types
47 
48Vue 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.
49 
50**BAD:**
51```vue
52<template>
53  <Transition name="fade">
54    <p v-if="isActive">Active</p>
55    <p v-else>Inactive</p>
56  </Transition>
57</template>
58```
59 
60**GOOD:**
61```vue
62<template>
63  <Transition name="fade" mode="out-in">
64    <p v-if="isActive" key="active">Active</p>
65    <p v-else key="inactive">Inactive</p>
66  </Transition>
67</template>
68```
69 
70## Use `mode` to Avoid Overlap During Swaps
71 
72When swapping components or views, use `mode="out-in"` to prevent both from being visible at the same time.
73 
74**BAD:**
75```vue
76<template>
77  <Transition name="fade">
78    <component :is="currentView" />
79  </Transition>
80</template>
81```
82 
83**GOOD:**
84```vue
85<template>
86  <Transition name="fade" mode="out-in">
87    <component :is="currentView" :key="currentView" />
88  </Transition>
89</template>
90```
91 
92## Animate `transform` and `opacity` for Performance
93 
94Avoid layout-triggering properties such as `height`, `margin`, or `top`. Use `transform` and `opacity` for smooth, GPU-friendly transitions.
95 
96**BAD:**
97```css
98.slide-enter-active,
99.slide-leave-active {
100  transition: height 0.3s ease;
101}
102 
103.slide-enter-from,
104.slide-leave-to {
105  height: 0;
106}
107```
108 
109**GOOD:**
110```css
111.slide-enter-active,
112.slide-leave-active {
113  transition: transform 0.3s ease, opacity 0.3s ease;
114}
115 
116.slide-enter-from {
117  transform: translateX(-12px);
118  opacity: 0;
119}
120 
121.slide-leave-to {
122  transform: translateX(12px);
123  opacity: 0;
124}
125```
126