列表的进入/离开过渡
<transition-group tag="ul"> <!--tag转为ul--> <li v-for="item in list" :key="item">{{item}}</li> <!--子元素要有key--> </transition-group>
注意：列表元素一定要有key
.v-enter,.v-leave-to{ opacity: 0; transform: translateX(30px); } .v-enter-active,.v-leave-active{ transition: all 1s; }
See the Pen vue列表过渡 by xugaoyi (@xugaoyi) on CodePen.
列表的排序过渡
.v-move { transition: transform 1s; }
See the Pen vue列表过渡-排序过渡 by xugaoyi (@xugaoyi) on CodePen.
列表过渡&排序过渡
See the Pen vue列表过渡&排序过渡 by xugaoyi (@xugaoyi) on CodePen.
