vue怎么实现动态列表尾部添加数据执行动画
vue怎么实现动态列表尾部添加数据执行动画
这篇文章主要介绍“vue怎么实现动态列表尾部添加数据执行动画”，在日常操作中，相信很多人在vue怎么实现动态列表尾部添加数据执行动画问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue怎么实现动态列表尾部添加数据执行动画”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
动态列表尾部添加数据执行动画
先上动画
动态控制节点数量（目前只显示6个节点）
尾部添加几个item，头部则删除几个item
触发 transition-group 动画
splice 的使用方法
代码：
<stylelang="scss">.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;}</style>
<template><divclass="vueBox"><transition-groupclass="content"name="list-complete"tag="div"><spanv-for="iteminlist"v-bind:key="item.value"class="list-complete-item">{{item.name}}</span></transition-group></div></template>
<script>exportdefault{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){case1:returnparseInt(Math.random()*minNum+1,10);break;case2:returnparseInt(Math.random()*(maxNum-minNum+1)+minNum,10);break;default:return0;break;}},animation(){letnewItems=[...this.list];//来一波随机个数，随机数组letrandomCount=1,addItems=[];randomCount=this.randomNum(1,3);console.info("生成随机数-尾部添加-头部删除",randomCount);Array.from(newArray(randomCount),(n,i)=>i).forEach(()=>addItems.push({name:(Math.random(0,1)*1000).toFixed(0),value:Math.random(0,1),}));//删除数组头部几个itemnewItems.splice(0,randomCount);//数组尾部添加几个itemnewItems.splice(newItems.length,0,...addItems);//触发transition-group动画this.list=[...newItems];},},};</script>
动态数据使用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怎么实现动态列表尾部添加数据执行动画”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注恰卡编程网网站，小编会继续努力为大家带来更多实用的文章！
