vue实现动态列表尾部添加数据执行动画_vue.js

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

先上动画

• 动态控制节点数量（目前只显示6个节点）
• 尾部添加几个item，头部则删除几个item
• 触发 transition-group 动画
• splice 的使用方法

代码：

动态数据使用wowjs显示动画

1.通过npm安装

npm install wowjs --save-dev

animate.css会自动安装。

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

import 'wowjs/css/libs/animate.css

在组件需要的地方引入wowjs

有两种使用方式：

第一种：

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

第二种：

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

wow实例化里面的配置参数

自己选择性添加配置参数

infinite无限次播放 

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