vue3如何动态修改css的@keyframes属性？

Question

现在需要动态获取dom列表的高度，该列表是后台返回的数据，数据条数是不固定的。目前设置的动画效果是写死的高度，根据该高度做动画滚动，现在要把该高度改成动态的值。
已经尝试过的方法：roll.value.styleSheets，发现该属性获取不到@keyframes

Answer 1

要动态修改CSS的@keyframes属性，可以使用Vue3提供的<style>标签以及CSSOM（CSS Object Model）API。看一个简单的Demo：

<template>
  <div class="container">
    <div ref="list" class="list">
      <!-- 动态渲染的列表 -->
    </div>
  </div>
</template>

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

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

    // 在组件挂载时获取列表高度，并动态修改CSS的@keyframes属性
    onMounted(() => {
      const listHeight = list.value.offsetHeight;
      const sheet = document.styleSheets[0];
      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 === '0%') {
              keyframe.style.transform = `translateY(0)`;
            } else if (keyframe.keyText === '100%') {
              keyframe.style.transform = `translateY(-${listHeight}px)`;
            }
          }
        }
      }
    });

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

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

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

Answer 2

使用CSS变量就行，👉 使用 CSS 自定义属性（变量） - CSS：层叠样式表 | MDN

具体使用方式可以借鉴这个问答 👉 Vue 中使用的 CSS 变量