前端 - transition-group 包裹的过渡组件，增加数据时，元素没有进入动画？

Question

transition-group 包裹的过渡组件，当删除一个元素，同时在这个删除位置上写入多个元素的时候：

                // 提取当前所有图标，进行释放                let onk = this.$util.deepClone(this.navLista)                // 先提取，后释放                let dnum = this.findIdIcon(this.rightClickValue.id)                let delFolder = onk[this.aindex].children.splice(dnum,1)[0]                for(let i = delFolder.children.length-1;i >= 0; i--){                    onk[this.aindex].children.splice(dnum,0,delFolder.children[i])                }                this.$store.commit('navListModiy', onk)

元素没有进入动画，直接就是enter-to的末位css

.flip-li-enter-active {    transition-duration: .3s;}.flip-li-leave-active {    position: absolute;}.flip-li-move {    transition-duration: 0.28s;}.flip-li-enter-to {    opacity: 1;    transform-origin: center;    transform: scale(1);    // transition-duration: .3s;}// 单个删除.flip-li-enter,.flip-li-leave-to {    opacity: 0;    transform-origin: center;    transform: scale(.1);    transition-duration: .3s;}

就是图标加入的时候没有从flip-li-enter这个css过渡到.flip-li-enter-to，所以没有动画，同时.flip-li-enter-to这个类名也没有消失，一直在dom上，vue2环境求解啦，谢谢啦

在看文档，appear 这种属性设置也没有用，不知到是加入的时候是不是存在了什么问题

Answer 1

从你的描述和代码中，我看到你在使用 Vue 的 <transition-group> 组件来处理元素的过渡动画。但是，你遇到的问题是，当你在删除一个元素并在其位置上添加多个新元素时，新元素没有从 .flip-li-enter 类过渡到 .flip-li-enter-to 类，因此没有动画效果。同时，.flip-li-enter-to 这个类名并没有从 DOM 上消失。

问题可能出在 transition-group 的 name 属性上。这个属性是用来指定过渡的类名的前缀的。如果没有设置 name 属性，那么 Vue 会使用组件的标签名作为前缀。然而，在你的例子中，你似乎没有设置 name 属性，所以 Vue 可能会使用默认的前缀，这可能与你预期的类名前缀不匹配。

你可以尝试在你的 <transition-group> 标签中添加 name 属性，并将其设置为 "flip"，这样你的过渡类名就会有一个明确的前缀，例如：

<transition-group name="flip">  <div v-for="item in list" :key="item.id">    <!-- Your content here -->  </div></transition-group>

然后，在你的 CSS 中，你可以使用这个前缀来定义你的过渡类，例如：

.flip-enter-active {  transition: opacity .3s, transform .3s;}.flip-leave-active {  position: absolute;}.flip-move {  transition: transform .28s;}.flip-enter-to {  opacity: 1;  transform: scale(1);}

另外，你需要确保你的 v-for 指令中的 :key 是唯一的。这是 Vue 的一个最佳实践，可以帮助提高渲染的性能，并确保正确的过渡效果。在你的例子中，你可以使用每个项目的 id 作为 key。