vue.js - 带有 vue2-animate 的 vue 过渡组不起作用

Question

我一直在努力使 vue 转换工作。

我正在使用 vue2-animate 和 vue 来为列表项出现/消失时创建一些简单的过渡效果。

这是块：

<transition-group class="mt-2" 
     name="fadeLeft" 
     v-if="type == selectedType" 
     tag="ul">
     <li class="mb-2" v-bind:key="category.name"
         v-for="(category, index) in getCategoriesForType(type)"
         @click="selectCategory(category)">
             {{ category.name }}
     </li>
</transition-group>

当我尝试它时，它不会添加任何效果。它只是显示/隐藏列表。

我已经测试/确认动画在不同的组件中工作，但无法弄清楚为什么上面的代码不做任何动画。

这是正在工作的块：

<ul class="list-group notes" v-if="notes.length > 0">
    <transition-group name="fadeLeft">
        <li v-for="(note, index) in notes" v-bind:key="note" class="list-group-item" v-on:remove="notes.splice(index, 1)">
              <button class="close" @click="removeNote(index)"><span class="fa fa-times"></span></button>
              {{ note.text }}
        </li>
     </transition-group>
</ul>

标签： vue.jsvuejs2transitionanimate.css