I have arranged a list of items inside a grid using vuejs, and I am dynamically updating the content of a cell within the grid by changing the class name. My goal is to change the element inside the cell using CSS3 animation. I tried applying CSS animation using transition-group, but it's not behaving as expected. The CSS class creates a new element that drops to the next line before hiding the previous element. How can I achieve an animation in place right inside the cell?
Check out the jsfiddle example here: 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>