Aoom
@Aoom
Изучаю JavaScript, Python, PHP, Bash

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

Пробовал применить анимацию к этому блоку через <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;
    }
  • Вопрос задан
  • 616 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
switch = !switch

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

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

<transition name="fade">

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

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

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

jsfiddle.net/p2c6y0bg
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы