Why is transition-group not working in vue?

Question

Vue.js

Hi everybody.
I get data from api and display it on the page.

<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>

And styles for 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;
}

Only the animation doesn't work.

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

Why?
Thanks in advance.

Answer 1

Vue DevTools says the version being used is 2.6.14. While the class responsible for the animation of the appearance corresponds to the third version ( read the documentation ):

.list-enter-from {

In addition, if you want the animation to work on the first render, you transition-groupshould add the parameter to appear.