My previous simple list had transitions working perfectly, but now that I am using components and templates the transitions no longer work. Can anyone help me understand why?
I want each item to animate individually, but it seems like all items are transitioning together.
I am currently using vue2.js
Here is my CSS:
.flip-list-move {
transition: transform 1s;
}
And here is my markup:
<div>
<transition-group name="flip-list" tag="div">
<div v-for="item in accFilters" class="box" v-bind:key="item">
<h1>{{ item.name }}</h1>
<img :src="item.imageUrl" style="width:200px;">
<p>{{item.extract}}</p>
{{ item.holidayType }}
<div is="task" v-for="avail in item.avail" v-bind:item="avail">
</div>
</div>
</transition-group>
</div>