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

<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>

npm install wowjs --save-dev

import 'wowjs/css/libs/animate.css

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

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