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