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

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

阅读 4.4k
2 个回答

要动态修改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>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题