vue+animation实现翻页动画

前端在做数据展示的时候 可能提留页面时间较长 导致数据不能及时更新 你可以定时更新  也可以做一个假数据 给用户视觉上的体验  接下来就是第二种 假数据 它用了C3 animation 实现了一个翻页动画

第一种是单独运动

<template>
    <div>
        <div>
            <ul>
                <li v-for="(item,i) in NumberList" :key="i" ><a :class="[item.isMove ? 'move-an' : '']">{{item.num}}</a></li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            NumberList:'',
            Number:108847,
        }
    },
    mounted(){
        let arr = String(this.Number).split('')
        this.NumberList=[]
        arr.forEach(item => {
            const model = {};
            model.isMove = false;
            model.num = item;
            this.NumberList.push(model);
        });
        setInterval(() =>{
            this.Number=this.Number+1;
            let data = String(this.Number);
            let arr = data.split("");
            arr.forEach((item, index) => {
                if (item !== this.NumberList[index].num) {
                    this.NumberList[index].isMove = true
                }
            });
        }, 10000)
    },
    watch: {
        Number() {
            setTimeout(() =>{
                let data = String(this.Number);
                let arr = data.split("");
                this.NumberList.forEach((item, index) => {
                this.NumberList[index].num = arr[index];
                });
            }, 500);
            setTimeout(() =>{
                this.NumberList.forEach((item, index) => {
                this.NumberList[index].isMove = false
                });
            }, 1000);
        }
    },
    methods:{
    }
}
</script>
<style lang="" scoped>
    h1{
        text-align:center;
    }
    ul{
        display: flex;
        
    }
    li{
        list-style: none;
        width:50px;height:80px;
        background: red;
        margin-right: 10px;
        text-align: center;
        line-height: 80px;
        font-size:20px;
        color:#ffffff;
        position: relative;
    }
    a {
        position: absolute;
        top: 3px;
        color: #ffffff;
    }
    .move-an {
        animation:mymove 1s infinite linear;
        -webkit-animation:mymove 1s infinite linear;
    }
    @keyframes mymove {
    0%   {top: 3px;}
    25%  {top: -40px;}
    48%  {top: -80px;}
    49%  {top: -80px; opacity: 0}
    50%  {top: 80px;}
    51%  {top: 80px;opacity: 1; }
    100% {top: 3px;}
    }
</style>

第二种是整体运动 0-9循环一边

<template>
    <div class="main">
        <div v-for="(item,i) in NumberList" class="move-num" :key="i">
            <div>
                <div style="visibility:hidden;position: static">
                    <span v-for="(list, i) in item.num" :key="i" class="num-move">{{list}}</span>
                </div>
                <a :class="[isMove === true ? 'move-an' : '']">
                    <span v-for="(list, i) in item.num" :key="i" class="num-move">{{list}}</span>
                </a>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            isMove:false,
            NumberList:[],
            Number:108847,
            numModels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
        }
    },
    mounted(){
        this.handdleDate()
        setInterval(() => {
            this.handdleDate()
        }, 10000)
    },
    methods:{
        handdleDate(){
            let arr = String(this.Number).split('')
            this.NumberList=[]
            arr.forEach(item => {
                
                const model = {}
                const baseArr = JSON.parse(JSON.stringify(this.numModels))
                model.isMove = false;
                for (let i = 0; i < parseInt(item) + 1; i++) {
                    baseArr.push(i)
                }
                model.num = baseArr;
                this.NumberList.push(model);
                this.isMove = true;
                 setTimeout(() => {
                    this.isMove = false
                }, 3000)
            });
        }
    }
}
</script>
<style lang="" scoped>
.main{
    display: flex;
}
.move-num{
    width:30px;height:40px;
    background:red;
    overflow: hidden;
    margin-right:10px;
    line-height: 40px;
    color:#fff;
    position: relative;
    overflow: hidden;
}
.move-num div {
    position: absolute;
    width: 100%;
    height: auto;
    
  }
.move-num div a {
      color: #ffffff;
      display: block;
      position: absolute;
      left: 10px;
      bottom: calc(100% - 45px);
}
.num-move {
  width: 100%;
  display: block;
  margin: 3px  0;
}
.move-an {
    animation:mymove 3s infinite linear forwards;
    -webkit-animation:mymove 3s infinite linear forwards;
}
.num-move {
    width: 100%;
    display: block;
    margin: 3px  0;
}
@keyframes mymove {
    0%   {bottom: 3px;}
    100% {bottom: calc(100% - 40px)}
}
</style>