vue采坑@keyframe：分页时钟功能

问题描述：
第一次刷新页面能实现指针旋转，后面再切换分页或刷新页面均不能实现动画效果

分析：
切换页面时，vue只更改了数据，样式没有跟着改变

解决：

<div class="chart" v-for="(item,index) in currentDetectors" :key="index">
        <div class="chartContent" v-if="item.ID1">
          <div class="electChart">
            <div class="detector">
              <div
                class="pointer"
                ref="pointer"
                v-bind:style="{
                //核心：在绑定@keyframes时，借助每个item.ID1的不用，为每个元素设置于以前的@keyframes，这样页面在刷新的时候就会连同样式一块更新（注意：这里的item.ID1是我自己的list的属性）
              animation: 'pointermove'+(item.ID1)+' 3s forwards',
            }"
              ></div>
              <div
                class="numbers"
                v-if="item.ID1"
              >{{item.validLow+'、'+item.validHigh+'、'+item.realtimev}}</div>
              <div class="pointerUnit">{{item.vUnit}}</div>
            </div>
          </div>
          <div class="detectName">{{item.vDevicedesc}}</div>
          <div class="detail">
            <div class="detail1">{{item.runstate}}</div>
            <div class="detail2">{{item.sitename}}</div>
            <div class="detail3">{{item.PicName}}</div>
            <div class="detail4">{{item.location}}</div>
          </div>
        </div>

 // 指针动画设置
    setPointer() {
      this.currentDetectors.forEach((item, index) => {
        if (item.ID1 != '') {
          // alert(11);
          let rotate =
            (item.realtimev / (item.validHigh - item.validLow)) * 298;
          if (rotate > 298) {
            rotate = 298;
          }
          let style = document.createElement('style');
          style.setAttribute('type', 'text/css');
          document.head.appendChild(style);
          let sheet = style.sheet;
          sheet.insertRule(
            `@keyframes pointermove` +
            //这里创建相应的@keyframes
              item.ID1 +
              `{
  from {
    transform: rotate(300deg);
  }
  to {
    transform: rotate(` +
              (300 + rotate) +
              `deg);
  }
}`,
            0
          );
        }
      });
    }

效果：