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

Question

[Сергей Бурдужа]

Все привет.
Получаю данные из 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/

Почему?
Заранее благодарен.

Answer 1

[0xD34F]

Vue DevTools говорит, что используемая версия - 2.6.14. В то время как класс, отвечающий за анимацию появления, соответствует третьей версии (читаем документацию):

.list-enter-from {

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

Comments

[Сергей Бурдужа]

Спасибо за ответ.
Я специально для этой задачи установил vue-cli.

<template>
  <div class="wrapper">
    <div v-if="list.length">
      <transition-group appear tag="ul" name="list">
        <li v-for="item in list" :key="item.title">{{ item.title }}</li>
      </transition-group>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    setTimeout(() => {
      this.list = [{ title: "some" }, { title: "some 2" }, { title: "some 3" }];
    }, 2000);
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
li {
  padding: 2rem;
  border: 1px solid #ccc;
}
.list-enter,
.list-leave-to {
  opacity: 0;
}

.list-leave,
.list-enter-to {
  opacity: 1;
}
</style>

Добавил классы для второй версии и appear, но тоже не работает.

[0xD34F]

Сергей Бурдужа, работает. Если не забыть указать длительность анимации.

[Сергей Бурдужа]

0xD34F, Точно, спасибо вам огромное.