I am facing an issue with a transition in Vue.js where only the leave transition is working and not the enter transition. Here is my code:
<template v-for="(item, index) in imagesList">
<transition name="fade">
<div class="ctn">
<div class="thumbnail">
<img :src="item.url" :alt="item.alt" :title="item.title">
</div>
<div class="info">
<p>{{ item.info }}</p>
</div>
</div>
</transition>
</template>
I have used the CSS code provided in the Vue.js documentation:
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}