为什么transition-group无效？

transition-group无效

transition-group无效
transition-group无效
transition-group无效
transition-group无效

多个的话，要加key，你加个key试试，最好不要用index

:key="item" 顺带贴出些console的相关

请根据文档的教程来编写~可能是缺失class
官方文档地址 https://v3.cn.vuejs.org/guide/transitions-list.html#%E5%88%97%E8%A1%A8%E7%9A%84%E8%BF%9B%E5%85%A5-%E7%A6%BB%E5%BC%80%E8%BF%87%E6%B8%A1

如有帮助请采纳~


 <div id="list-demo">
      <button v-on:click="add">Add</button>
      <button v-on:click="remove">Remove</button>
      <transition-group
        name="list"
        tag="ul"
      >
        <li
          v-for="(item,index) in items"
          :key="index"
          class="list-item"
        >
          {{ item }}
        </li>
      </transition-group>
    </div>
methods: {
    randomIndex() {
      return Math.floor(Math.random() * this.items.length);
    },
    add() {
      this.items.splice(this.randomIndex(), 0, this.nextNum++);
    },
    remove() {
      this.items.splice(this.randomIndex(), 1);
    },
  },

<style scoped>
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active,
.list-leave-active {
  transition: all 1s;
}
.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

</style>

动画是不是没有设置初始值，left(0px)

不要用v-if

没有动画的原因
两个可能性

可能性一

内部元素总是需要提供唯一的 key attribute 值, key 不能是 index

可能性二

如果transition过渡组件的父元素也是同时切换显示隐藏的话，
子元素的动画效果就失效了，即使给过渡加上延迟时间也是没有效果的。
观察后可以发现transition组件并没有添加name-enter，name-enter-active等类名。

比如这样：

<div class="father" v-show="isShowFather">
    <transition name="fade" tag="div">
        <div class="child" v-show="childType==1">
            child1
        </div>
        <div class="child" v-show="childType==2">
            child2
        </div>
        <div class="child" v-show="childType==3">
            child3
        </div>
    </transition>
</div>

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s linear;
}
.fade-enter-to,
.fade-leave {
  opacity: 1;
}

结果并没有动画效果

解决方法：

<transition name="fade" tag="div">
    <div class="father" v-show="isShowFather">
        <div class="child" v-show="childType==1">
            child1
        </div>
        <div class="child" v-show="childType==2">
            child2
        </div>
        <div class="child" v-show="childType==3">
            child3
        </div>
    </div>
</transition>

.fade-enter .child,
.fade-leave-to .child{
  opacity: 0;
}
.fade-enter-active .child,
.fade-leave-active .child{
  transition: all 0.5s linear;
}
.fade-enter-to .child,
.fade-leave .child{
  opacity: 1;
}

这样既可以控制父元素的动画也可以控制子元素的动画，transition-group也是同样的道理

另外

如果只希望子元素发生动画而父元素不要动画。我的处理是在引用组件的地方，删除v-if控制，而在组件内部，父子元素都使用v-show ，transition 包裹子元素。这样实测是可以让子元素发生动画的。

<template>



    <div class="confirmDialog-wrapper" v-show="confirmDialogVisble">



        <transition name="confirmTrans">



            <div class="confirmDialog-inner" v-show="confirmDialogVisble">



                <slot name="dialogContent"></slot>



                <div class="confirmDialog-footer">



                    <div @click.stop="handleClickCancelButton" class="confirmDialog-footer-button">取消</div>



                    <div @click.stop="handleClickOpearaButton" class="confirmDialog-footer-button opearButton">{{opearButtonText}}</div>



                </div>



            </div>



        </transition>



    </div>



</template>

参考链接：
https://blog.csdn.net/weixin_44646763/article/details/118543123

首先上 transition-group 里面的v-for元素是必须要加 key，这个上面说了，你要想有动画，就得个 transition-group 添加 name 属性，你现在没有指定 name 属性