vue怎么实现动态列表尾部添加数据执行动画

vue怎么实现动态列表尾部添加数据执行动画

这篇文章主要介绍“vue怎么实现动态列表尾部添加数据执行动画”，在日常操作中，相信很多人在vue怎么实现动态列表尾部添加数据执行动画问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue怎么实现动态列表尾部添加数据执行动画”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

动态列表尾部添加数据执行动画

先上动画

• 动态控制节点数量（目前只显示6个节点）

• 尾部添加几个item，头部则删除几个item

• 触发 transition-group 动画

• splice 的使用方法

代码：

.content{display:flex;width:600px;height:50px;margin:100pxauto;}.list-complete-item{transition:all1s;display:inline-block;width:100px;text-align:center;line-height:50px;font-size:18px;}.list-complete-enter,.list-complete-leave-to{opacity:0;transform:translateX(-30px);}.list-complete-leave-active{position:absolute;}

动态数据使用wowjs显示动画

1.通过npm安装

npminstallwowjs--save-dev

animate.css会自动安装。

2.在main.js中引入animate.css

import'wowjs/css/libs/animate.css

在组件需要的地方引入wowjs

有两种使用方式：

第一种：

import{WOW}from'wowjs'mounted(){newWOW().init()}

第二种：

importWOWfrom'wowjs'mounted(){newWOW.WOW().init()}

wow实例化里面的配置参数

自己选择性添加配置参数

infinite无限次播放

如过添加动画的元素渲染数据是请求接口渲染的 那么实例化wow一定得在接口请求结束之后使用this.$nextTick()在这个函数里面执行

到此，关于“vue怎么实现动态列表尾部添加数据执行动画”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注恰卡编程网网站，小编会继续努力为大家带来更多实用的文章！