To create the animation, it is important to include both "from" and "to" values. When an element is removed from the DOM, the remaining elements are positioned inline, which can disrupt the transition if there is no reference value.
There is a similar issue when trying to transition from height: 0 to height: auto.
Learn how to transition from height: 0; to height: auto; using CSS here.
I have created a sample solution using width (larger than the content) and setting the width to 0 with opacity 0 to hide the inner content. By clicking on the items in the sample, they appear to be "removed" (opacity:0 and width: 0) and the transition works because there is an initial width set (80px).
new Vue({
el: "#app",
data: () => ({
// yes, there is better ways, but let make this sample "simple"
letters: ['a', 'b', 'c', 'd'],
visible: {
a: true,
b: true,
c: true,
d: true,
}
})
})
#app {
/* decoration, you can remove */
width: 100%;
text-align: center;
background-color: #f4f4f4;
}
.moving {
/* margin and padding 0
because the width content will be set to 0
if this element has a margin, when removed the margin still display the "space"
*/
padding: 0;
margin: 0;
font-size: 0; /* remove white space in DOM element */
display: inline-block;
opacity: 1;
transition: width linear .2s;
/* decoration, you can remove */
width: 80px;
border: 1px dotted #ccc;
cursor: pointer;
}
.moving-content {
font-size: 18px; /* restore font size */
display: inline-block;
/* decoration, you can remove */
background-color: #2af;
color: white;
padding: 20px;
box-sizing: border-box;
}
.moving.hidden {
width: 0px;
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="letter in letters"
:key="letter"
:class="{ moving: true, hidden: !visible[letter] }" @click="visible[letter] = false">
<span class="moving-content">
{{ letter }}
</span>
</div>
</div>
Additional Resources:
Check out this resource for more information: https://stackoverflow.com/a/40785144/1724128
Here is another helpful resource: https://stackoverflow.com/a/53127208/1724128