具有vue2-animate的vue过渡组不起作用

时间:2018-07-22 01:28:15

标签: vue.js vuejs2 transition animate.css

我一直在努力使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>

0 个答案:

没有答案