1---
2title: TransitionGroup FLIP Animations Do Not Work With Inline Elements
3impact: MEDIUM
4impactDescription: Move animations silently fail on inline elements, causing items to jump
5type: gotcha
6tags: [vue3, transition-group, animation, flip, css, display, inline-block]
7---
8 
9# TransitionGroup FLIP Animations Do Not Work With Inline Elements
10 
11**Impact: MEDIUM** - The FLIP (First, Last, Invert, Play) animation technique that Vue uses for `<TransitionGroup>` move transitions does not work with elements that have `display: inline`. The move animation will silently fail, and items will jump to their new positions instead of smoothly transitioning.
12 
13This is a CSS limitation, not a Vue bug. CSS transforms (which FLIP uses internally) do not apply to inline elements per the CSS specification.
14 
15## Task Checklist
16 
17- [ ] Ensure list items are not `display: inline` elements
18- [ ] Use `display: inline-block` or `display: block` for list items
19- [ ] Use flexbox or grid containers which make children block-level
20- [ ] Check if inherited styles are setting `display: inline`
21 
22**Incorrect - Inline elements break move animations:**
23```vue
24<template>
25  <!-- BROKEN: span elements are inline by default -->
26  <TransitionGroup name="tag" tag="div" class="tag-container">
27    <span v-for="tag in tags" :key="tag.id" class="tag">
28      {{ tag.name }}
29    </span>
30  </TransitionGroup>
31</template>
32 
33<style>
34.tag-move {
35  transition: transform 0.3s ease;
36  /* This won't work because spans are inline! */
37}
38</style>
39```
40 
41**Correct - Use inline-block:**
42```vue
43<template>
44  <TransitionGroup name="tag" tag="div" class="tag-container">
45    <span v-for="tag in tags" :key="tag.id" class="tag">
46      {{ tag.name }}
47    </span>
48  </TransitionGroup>
49</template>
50 
51<style>
52.tag {
53  display: inline-block; /* REQUIRED for FLIP animations */
54}
55 
56.tag-move {
57  transition: transform 0.3s ease;
58}
59</style>
60```
61 
62**Correct - Use flexbox container:**
63```vue
64<template>
65  <TransitionGroup name="tag" tag="div" class="tag-container">
66    <span v-for="tag in tags" :key="tag.id" class="tag">
67      {{ tag.name }}
68    </span>
69  </TransitionGroup>
70</template>
71 
72<style>
73.tag-container {
74  display: flex;
75  flex-wrap: wrap;
76  gap: 8px;
77}
78 
79/* Flex children are block-level, FLIP works automatically */
80.tag-move {
81  transition: transform 0.3s ease;
82}
83</style>
84```
85 
86**Correct - Use block elements:**
87```vue
88<template>
89  <!-- div elements are block by default -->
90  <TransitionGroup name="item" tag="div">
91    <div v-for="item in items" :key="item.id" class="item">
92      {{ item.name }}
93    </div>
94  </TransitionGroup>
95</template>
96 
97<style>
98.item-move {
99  transition: transform 0.3s ease;
100}
101</style>
102```
103 
104## Why Inline Elements Don't Work
105 
106Per CSS specifications, the `transform` property does not apply to inline boxes. Since FLIP animations use CSS transforms to animate element positions:
107 
108```css
109/* Vue internally applies something like this during move */
110.item {
111  transform: translateX(-50px) translateY(-20px);
112  /* Then transitions to transform: none */
113}
114```
115 
116This transform is ignored on inline elements, so no animation occurs.
117 
118## Elements That Are Inline by Default
119 
120Be aware of these common inline elements that need `display: inline-block`:
121 
122- `<span>`
123- `<a>`
124- `<em>`, `<strong>`, `<i>`, `<b>`
125- `<code>`, `<kbd>`
126- `<label>`
127- `<button>` (inline-block by default, but verify)
128 
129## Move Animations Also Require Transform Transition
130 
131The `.move` class must have `transform` in its `transition` property:
132 
133```css
134/* CORRECT */
135.list-move {
136  transition: transform 0.3s ease;
137}
138 
139/* ALSO CORRECT */
140.list-move {
141  transition: all 0.3s ease; /* 'all' includes transform */
142}
143 
144/* WRONG - transform not included */
145.list-move {
146  transition: opacity 0.3s ease; /* Move won't animate! */
147}
148```
149 
150## Reference
151- [Vue.js TransitionGroup Move Transitions](https://vuejs.org/guide/built-ins/transition-group.html#move-transitions)
152- [MDN CSS Transform - Formal Definition](https://developer.mozilla.org/en-US/docs/Web/CSS/transform#formal_definition)
153