Vue.js 转换组未在Vue中的嵌套组件中工作

过渡工作良好，在上述

在剖面树组件中有一个课程树组件

<transition-group name="slide">
      <section-tree v-for="(section,index) in form.sections" :key="section.random"
          :index = "index"
          :section = "section"
          @selectedSectionAndLesson="selectedSectionAndLesson"
       >
       </section-tree>
</transition-group>

球场建设者

随机性在组件中是唯一的。但这个组件的转换不起作用。我正在动态增加课程数组中各节的记录数。

---

提前谢谢。

您是否也添加了一些CSS样式

这是为您的案例复制和编辑的：

<template>
    <ul class="iw-sider-card-wrap">
        <div class="iw-sider-card-header">
             <a class="card-title"> Course Builder</a>
        </div>
        <transition-group name="slide">
            <lesson-tree v-for="(lesson,index) in lessons" :key="lesson.random"
                :index = "index"
               @selectedSectionAndLesson="selectedSectionAndLesson"
            >
            </lesson-tree>
         </transition-group>
    </ul>
</template>

---

是的，我添加了CSS

.slide-item {
  display: inline-block;
  margin-right: 10px;
}
.slide-enter-active, .slide-leave-active {
   transition: all 1s;
}
.slide-enter, .slide-leave-to /* .slide-leave-active below version 2.1.8 */ {
   opacity: 0;
   transform: translateY(30px);
}