Vue动画篇（四）——列表动画

}

.v-enter,

.v-leave-to {

opacity: 0;

transform: translateY(100px);

}

.v-enter-active,

.v-leave-to {

transition: all 0.6s ease;

}

注意事项

（1）在实现列表过渡的时候，需要过度的元素，是通过v-for循环渲染出来的，不能使用 transition 包裹，需要使用transitionGroup

（2）如果要为v-for循环出来的元素设置动画，必须为每一个元素设置 :key 属性

（3）最后要定义这两组类

.v-enter,

.v-leave-to {

opacity: 0;

transform: translateY(100px);

}

.v-enter-active,

.v-leave-to {

transition: all 0.6s ease;

}

列表删除功能动画实例

---

承接上个例子，增加了列表删除功能

vueApp ul { list-style: none; } li { border: 1px dashed gray; padding: 5px; margin-bottom: 10px; width: 100%; } li:hover { background-color: pink; transition: all 0.4s ease; } .v-enter, .v-leave-to { opacity: 0; transform: translateY(100px); } .v-enter-active, .v-leave-to { transition: all 0.6s ease; } /* v-move 和 v-leave-to 配合使用，能够实现列表后续的元素，逐渐飘上来的效果 */ .v-move { transition: all 0.6s ease; } .v-leave-to { position: absolute; }