I attempted to create an animation, but it's not working as expected. I also experimented with using transition-group. How can I modify this code to make it functional?
The goal is to display two different lists based on the category of data retrieved from my data.json.js file.
When using the transition-group tag, an error occurred:
<transition-group> children must be keyed: <li>Template
<button @click="switcher = !switcher">SWITCH</button>
<transition name="fade">
<li v-for="elements in myData" v-if="elements.key == getKey()">
<span>{{elements.title}}</span>
</li>
</transition>
Script
data() {
return {
switcher: true,
}
getKey(){
if (this.switcher) {
return 'KEY'
} else {
return 'ANOTHER KEY'
}
Style
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave {
opacity: 0;
}