Is it achievable to create a smooth transition between two CSS classes with different background images? That's the challenge I'm currently facing.
Here is the Vue code snippet I am working on:
<div id="flip-list-demo" class="demo">
<transition-group name="flip-list" tag="ol">
<div v-for="item, in items" class="licontainer" v-bind:key="item.text">
<li :data-shares="item.shares" :data-pos="item.datapos">
<a href="#">
{{ item.text }}
</a>
</li>
<transition name="fade">
<div :id = "'icon' + item.uid" :class="item.icon"></div>
</transition>
</div>
</transition-group>
</div>
Corresponding CSS styles:
ol .red, .yellow, .green {
display: inline-block;
width: 40px;
height: 40px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
ol .yellow {
transition: background-image 2s;
background-image: Long SVG code;
}
ol .green {
transition: background-image 2s;
background-image: Long SVG code;
}
ol .red{
transition: background-image 2s;
background-image: Long SVG code;
}
The dynamic update of the icon property triggers a redraw and changes the icons within the Vue instance.
I am particularly interested in knowing if there is a way to incorporate an opacity fade transition between the two classes, given that no items are being added or removed, just the class being updated in Vue.