【翻页计时器动画】手摸手写一个时间翻页计时器animation动画，基于js、css、vue

项目需要写了一个翻页的计时器，项目基于vue，里面内容涉及组件知识，样式如下图：

本组件分成两个组件，一个是单独的一个反转的数字，另一个是把这个翻页组成一个计时器。

先分析单独翻转的数据动画：（先抛代码）

countTurn.vue

<template>
  <div id="stage-1" class="stage stage-state-default">
  <div class="stage-content">
    <ul class="stage-1-icon">
      <li :class="'stage-1-icon-1'">
        <div class="stage-1-icon-top" :class="change?'turn-top':''" :style="{backgroundImage:'url('+pic1+')'}">
        </div>
        <div class="stage-1-icon-bottom" :style="{backgroundImage:'url('+pic1+')'}">
        </div>
      </li>
      <li :class="'stage-1-icon-2'">
        <div class="stage-1-icon-top" :style="{backgroundImage:'url('+pic2+')'}">
        </div>
        <div class="stage-1-icon-bottom" :class="change?'turn-bottom':''" :style="{backgroundImage:'url('+pic2+')'}">
        </div>
      </li>
    </ul>
  </div>
</div>
</template>
<script>
import pic1 from '../../assets/count/1.png'//图片素材
import pic2 from '../../assets/count/2.png'
import pic3 from '../../assets/count/3.png'
import pic4 from '../../assets/count/4.png'
import pic5 from '../../assets/count/5.png'
import pic6 from '../../assets/count/6.png'
import pic7 from '../../assets/count/7.png'
import pic8 from '../../assets/count/8.png'
import pic9 from '../../assets/count/9