vue+animation实现翻页动画的方法

<template>
  <div>
    <div>
      <ul>
        <li v-for="(item,i) in NumberList" :key="i" ><a :class="[item.isMove &#63; '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>
  h2{
    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>

<template>
  <div class="main">
    <div v-for="(item,i) in NumberList" class="move-num" :key="i">
      <div>
        <div >
          <span v-for="(list, i) in item.num" :key="i" class="num-move">{{list}}</span>
        </div>
        <a :class="[isMove === true &#63; '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>