Vue3中如何动态修改@keyframes动画属性以实现动态列表高度的滚动效果？

<template>
  <div class="container">
    <div class="list" ref="list"></div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  name: 'DynamicAnimation',
  setup() {
    const list = ref(null);

    onMounted(() => {
      const listHeight = list.value.offsetHeight;
      const sheet = document.styleSheets[0]; // 假设@keyframes规则在第一个样式表中
      const rules = sheet.cssRules || sheet.rules;
      for (let i = 0; i < rules.length; i++) {
        const rule = rules[i];
        if (rule.name === 'scroll-animation') {
          const keyframes = rule.cssRules || rule.rules;
          for (let j = 0; j < keyframes.length; j++) {
            const keyframe = keyframes[j];
            if (keyframe.keyText === '100%') {
              keyframe.style.transform = `translateY(-${listHeight}px)`;
            }
          }
        }
      }
    });

    return { list };
  },
};
</script>

<style scoped>
.list {
  animation: scroll-animation 5s infinite linear;
}

@keyframes scroll-animation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-300px); /* 初始值 */
  }
}
</style>