Группа переходов не работает во вложенных компонентах в Vue

Question

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

Переход работает нормально, как описано выше.

Внутри компонента дерева разделов есть компонент дерева урока.

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

Случайный является уникальным в компоненте. но переход не работает для этого компонента. Я увеличиваю количество записей в разделах массив уроков динамически. Заранее спасибо.

Answer 1

Вы также добавили стиль 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);
}