js中根据接口返回数据长度动态添加竖向滚动动画

js代码：

getLotteryPrize() {
      getLotteryPrizeList({actId: this.actId, pageSize: 100}).then(res => {
        let pLength
          this.prizeMsg = []
          this.prizeMsg = this.groupSum(res.rows, 'prizeType', 'count')
          pLength = this.prizeMsg.length * 46
        if (pLength > 184) {
          let time = pLength / 25
          let pScroll = ` @keyframes pChangeScroll {
                    0%{
                      transform:translateY(90px);
                    }
                    100%{
                      transform:translateY(-${pLength}px);
                    }
            }`
          let sheet = document.styleSheets[0]
          if (sheet.cssRules[1].name === 'pChangeScroll') {
            // console.log('存在了')
            sheet.deleteRule(1)
          }
          // console.log('重新插入')
          sheet.insertRule(pScroll, 1)
          const pListControl = document.getElementById('pList')
          pListControl.style.animation = `pChangeScroll  ${time}s  infinite`
          pListControl.style.animationTimingFunction = 'cubic-bezier(0, -0.01, 1, 1)'
        }
        // console.log(this.beforeResult)
      })
    },

对应页面元素：

<div id="prizeMsg" style="max-height: 180px;overflow: hidden;">
  <div id="pList">
      <div class="message" style="line-height: 40px;height:40px;grid-template-columns: 1fr 3fr 1fr;"
           v-for="(msg,index) in prizeMsg" :key="index">
        <span>{{ msg.prizeType }}</span>
        <span>剩余数量{{ msg.count }}</span>
      </div>
  </div>
</div>

css：

.message {
  display: grid;
  grid-template-columns: 1fr 0.7fr 1fr 1.5fr;
  row-gap: 6px;
  margin: 6px 0;
  text-align: center;

  span {
    font-size: 16px;
  }
}