Как сделать анимацию для «v-for» элемента с «v-if» условием в Vue?

Question

[Тестировщик Реальности]

Пробовал применить анимацию к этому блоку через <transition> и <transition-group>, но ни то, ни другое не работает. Подскажите пожалуйста, как можно прикрутить сюда анимацию?
Здесь происходит рендеринг двух разных списков отобранных по категории из файла 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

[0xD34F]

switch = !switch

Зачем вы решили использовать ключевое слово в качестве имени свойства компонента? Переименуйте.

происходит рендеринг двух разных списков

<transition name="fade">

Для списков надо использовать transition-group.

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

Во-первых - не задан key. Во-вторых.

jsfiddle.net/p2c6y0bg

Comments

[Тестировщик Реальности]

Потрясающе, спасибо. Подскажите ещё, что мне сделать с этой строчкой:

<div class="progress" :data-value="elements.progress/100"></div>

Этот элемент присваивается только один раз и на втором списке он не обновляется из данных второго списка.

[0xD34F]

Макс Шведов, не подскажу. Откуда мне знать, что это такое должно быть, зачем нужно и т.д.? - читать мысли не умею, извините.

[Тестировщик Реальности]

0xD34F, этот див находится в том же <li> элементе

[Тестировщик Реальности]

Хотя нет, всё меняется, только не отрисовывается почему-то канвас

[0xD34F]

Макс Шведов, канвас, просто великолепно. Канвас, который до сего момента вообще не упоминался.

"Не отрисовывается" - в смысле, при смене списка? Ну так делайте watch на переменную, отвечающую за то, какой список отображается, и в обработчике вызывайте метод перерисовки.

[Тестировщик Реальности]

Благодарю вас 0xD34F за ответ, ещё бы знать как всё это проделать, я только вчера начал Vue изучать)

[0xD34F]

Макс Шведов, в документации всё описано.

[Тестировщик Реальности]

0xD34F, спасибо ещё раз, разобрался.