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

目录

• 动态列表尾部添加数据执行动画
• 先上动画
• 动态数据使用wowjs显示动画
• 1.通过npm安装
• 2.在main.js中引入animate.css

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

先上动画

• 动态控制节点数量（目前只显示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()在这个函数里面执行

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。