How to make animation for "v-for" element with "v-if" condition in Vue?

Question

Vue.js

Tried to animate this block with <transition>and <transition-group>, but neither works. Can you please tell me how to add animation here?
Here, two different lists are rendered, selected by category from the data.json.js.

template

<button @click="switch = !switch">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 {
    		switch: true,
    	}
    
    getKey(){
    	if (this.switch) {
    		return 'KEY'
    	} else {
    		return 'ANOTHER KEY'
    	}

style

.fade-enter-active, .fade-leave-active {
      transition: opacity .5s;
    }
    .fade-enter, .fade-leave {
      opacity: 0;
    }

Answer 1

switch = !switch

Why did you decide to use the keyword as the bean property name? Rename.

two different lists are rendered

<transition name="fade">

For lists, use transition-group.

<li v-for="elements in myData" v-if="elements.key == getKey()">

First, key is not set. Secondly .
jsfiddle.net/p2c6y0bg