如何在 Vue.js 中的单个列表元素上使用过渡? [英] How can I use transition on individual list elements in Vue.js?
问题描述
我对 vue.js 中的转换的理解是你使用
在单个元素之间设置动画,
为整个列表设置动画.
似乎如果您想为列表项内的过渡设置动画,您可以在列表内使用
.例如像这样:
<过渡><div>从此过渡...
<div>……到这个.
</span>
然而,当我进行更改时,动画不起作用.这是预期的行为吗?
更新:经过一番修修补补,我发现我原来的假设是正确的.我只是做错了别的事情.但对于遇到此问题的其他人来说,值得注意的是.
如果要为列表的各个组件设置动画,可以在列表中使用
.
您可以使用过渡组以相同的方式过渡所有子项.另外,尝试在 v-for
new Vue({el: "#app",数据: {项目 : [{消息:'sometext',ID:1},{消息:'sometext',ID:2},{消息:'sometext',ID:3}],编号:3},方法: {新增项目(){这个.id++this.items.push({message: 'sometext', id: this.id});},进入(){console.log('transition enter call');}}})
.fade-enter-active, .fade-leave-active {过渡:不透明度 0.5s;}.fade-enter, .fade-leave-to/* .fade-leave-active 低于版本 2.1.8 */{不透明度:0;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="应用程序"><div id="容器"><button @click="addItem()">添加项目</button><transition-group :name="'fade'" v-on:enter="enter"><span v-for="item in items" v-bind:key="item.id">{{item.message}}</span></transition-group>