动态@-webkit-keyframes动画

　　　　<ul
          :style="`animation: ${time}s change linear infinite normal;-webkit-animation: ${time}s change linear infinite normal;`"
        >
          <li v-for="(general,index) in general_list" :key="index">
            <div class="rank">i</div>
            <div class="roster">
              <p>{{general.user_name}}</p>
              <p>{{general.coupon_amount}}</p>
              <p>{{general.time}}</p>
            </div>
          </li>
        </ul>

 　　　　this.time = (res.data.list.list.length - 4) * 4;
        let num = (res.data.list.list.length - 4) * 0.6;
        let style = document.styleSheets[0];
        //style.deleteRule(6);//清除之前写入的动画样式,6代表动画所在的数组位置
        style.insertRule(
          " @-webkit-keyframes change { 0% { -webkit-transform: translateY(0); transform: translateY(0);} 100% { -webkit-transform: translateY(-" +
            num +
            "rem); transform: translateY(-" +
            num +
            "rem);}}"
        );