Vuejs animate list items inside grid

Question

I created list items inside the grid using vuejs. I dynamically update the contents of the cell inside the grid, changing the name of the class. I want to change an element inside a cell using css3 animation. Using a transition group, I applied the css animation, but it doesn’t work correctly, since the css class is applied, it creates a new element that moves to the next line and then hides the previous element. How can I animate in place right inside the cell?

here is jsfiddle: https://jsfiddle.net/49gptnad/274/

<div id="vue-instance"> <transition-group tag="div" name="fade" class="uk-grid"> <div class="uk-width-1-2" v-for="item in thumbs" :key="item.id"> <div class="item"> <i class="fa" :class="item.icon" aria-hidden="true"></i> <h3>{{item.name}}</h3> </div> </div> </transition-group> </div> 

Answer 1

The easiest solution is to hide the previous icon:

 .fade-enter-active { display: none; } 

The fiddle is updated here

Answer 2

You can try something like this:

 .item { text-align: center; font-size: 20px; transition: opacity .5s; animation: fade .5s; } @keyframes fade { from {opacity: 0;} to {opacity: 1;} } 

https://jsfiddle.net/49gptnad/1338/

I removed the transition from html and added a simple keyframe animation.