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

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

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

先上动画

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

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

• 触发 transition-group 动画

• splice 的使用方法

代码：

<style lang="sCSS">.content {  display: flex;  width: 600px;  height: 50px;  margin: 100px auto;}.list-complete-item {  transition: all 1s;  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;}</style>

<template>  <div class="vueBox">    <transition-group class="content" name="list-complete" tag="div">      <span        v-for="item in list"        v-bind:key="item.value"        class="list-complete-item"      >        {{ item.name }}      </span>    </transition-group>  </div></template>

<script>export default {  name: "slideanimation",  data() {    return {      list: [        {          name: "苹果",          value: "1.68",        },        {          name: "橘子",          value: "0.9",        },        {          name: "香蕉",          value: "2.58",        },        {          name: "猕猴桃",          value: "3.2",        },        {          name: "灵梦",          value: "1.2",        },        {          name: "李子",          value: "13.2",        },      ],    };  },  mounted() {    // 定时模拟的Socket的 推送数据， 需求： 页面只显示6个节点，推送几个新的数据，则删除头部几个数组。    setInterval(() => {      this.animation();    }, 3000);  },  methods: {    // 生成指定 随机范围的 整数    randomNum(minNum, maxNum) {      switch (arguments.length) {        case 1:          return parseInt(Math.random() * minNum + 1, 10);          break;        case 2:          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);          break;        default:          return 0;          break;      }    },    animation() {      let newItems = [...this.list];      // 来一波随机个数，随机数组      let randomCount = 1,        addItems = [];      randomCount = this.randomNum(1, 3);      console.info("生成随机数 - 尾部添加 - 头部删除", randomCount);      Array.from(new Array(randomCount), (n, i) => i).forEach(() =>        addItems.push({          name: (Math.random(0, 1) * 1000).toFixed(0),          value: Math.random(0, 1),        })      );      // 删除 数组 头部 几个item      newItems.splice(0, randomCount);      // 数组 尾部 添加 几个item      newItems.splice(newItems.length, 0, ...addItems);      // 触发 transition-group 动画      this.list = [...newItems];    },  },};</script>

动态数据使用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()在这个函数里面执行

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