<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() {
? ? // 定時(shí)模擬的socket的 推送數(shù)據(jù)， 需求： 頁面只顯示6個(gè)節(jié)點(diǎn)，推送幾個(gè)新的數(shù)據(jù)，則刪除頭部幾個(gè)數(shù)組。
? ? setInterval(() => {
? ? ? this.animation();
? ? }, 3000);
? },
? methods: {
? ? // 生成指定 隨機(jī)范圍的 整數(shù)
? ? 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];
? ? ? // 來一波隨機(jī)個(gè)數(shù)，隨機(jī)數(shù)組
? ? ? let randomCount = 1,
? ? ? ? addItems = [];
? ? ? randomCount = this.randomNum(1, 3);
? ? ? console.info("生成隨機(jī)數(shù) - 尾部添加 - 頭部刪除", 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),
? ? ? ? })
? ? ? );
? ? ? // 刪除 數(shù)組 頭部 幾個(gè)item
? ? ? newItems.splice(0, randomCount);
? ? ? // 數(shù)組 尾部 添加 幾個(gè)item
? ? ? newItems.splice(newItems.length, 0, ...addItems);
? ? ? // 觸發(fā) transition-group 動(dòng)畫
? ? ? 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()
? ?}