Vue动画篇（四）——列表动画，CSS的标准文档流

js基础

1)对js的理解？ 2)请说出以下代码输出的值？ 3)把以下代码，改写成依次输出0-9 4)如何区分数组对象，普通对象，函数对象 5)面向对象、面向过程 6)面向对象的三大基本特性 7)XML和JSON的区别？ 8)Web Worker 和webSocket？ 9)Javascript垃圾回收方法？ 10)new操作符具体干了什么呢？ 11)js延迟加载的方式有哪些？ 12)WEB应用从服务器主动推送Data到客户端有那些方式？

开源分享：docs.qq.com/doc/DSmRnRG… 这是一个简单的列表，只有一个简单的添加数据的功能，动画部分是每次添加数据时，新出现的数据都会以动画的形式出现。

vueApp ul { list-style: none; } li { border: 1px dashed gray; padding: 5px; margin-bottom: 10px; } 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; }

注意事项

（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; }