serii81
@serii81
Я люблю phр...

Почему не срабатывает transition-group в vue?

Все привет.
Получаю данные из api и вывожу на страницу.

<preloader v-if="loading"></preloader>
<template v-else-if="filtered.length > 0">
    <transition-group name="list" tag="div" class="page-portfolio__posts" :key="1">
        <div class="portfolio-post page-portfolio__posts-item" v-for="item in filtered" :key="item.img">
            <div class="portfolio-post__img">
                <img :src="item.img" alt="">
            </div>
            <header class="portfolio-post__header">
                <ul>
                    <li>{{ item.parent_term }}</li>
                    <li>{{ item.term_name }}</li>
                </ul>
            </header>
            <footer class="portfolio-post__footer">
                <h2 class="portfolio-post__title">{{ item.title }}</h2>
                <a :href="item.url" target="_blank" class="btn">Vai al sito</a>
            </footer>
        </div>
    </transition-group>
</template>
<div :key="2" v-else class="portfolio-post__not-found">
    <h3>No portfolio founded....</h3>
</div>


И стили для list.

.list-enter-from {
	opacity: 0;
	transform: scale(0.6);
}
.list-enter-to {
	opacity: 1;
	transform: scale(1);
}
.list-enter-active {
	transition: all 1s;
}

.list-leave-from {
	opacity: 1;
	transform: scale(1);
}
.list-leave-to {
	opacity: 0;
	transform: scale(0);
}
.list-leave-active {
	transition: all 1s;
}


Только анимация не срабатывает.

https://new2.bludelego.it/portofolio/

Почему?
Заранее благодарен.
  • Вопрос задан
  • 34 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Vue DevTools говорит, что используемая версия - 2.6.14. В то время как класс, отвечающий за анимацию появления, соответствует третьей версии (читаем документацию):

.list-enter-from {

Кроме того, если хотите, чтобы анимация отрабатывала при первом рендеринге, для transition-group следует добавить параметр appear.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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