首页 > web前端 > css教程 > 正文

Vue3中如何动态修改@keyframes动画高度以适应动态DOM列表?

花韻仙語
发布: 2025-03-17 10:50:11
原创
376人浏览过

vue3中如何动态修改@keyframes动画高度以适应动态dom列表?

在Vue3中,动态调整CSS的@keyframes属性以响应数据变化,例如根据动态DOM列表高度调整动画滚动距离,是一个常见需求。本文将演示如何解决这个问题,避免硬编码动画高度的局限性。

问题:如何根据后台返回的、数量不定的DOM列表高度,动态修改@keyframes动画的高度值?直接访问@keyframes属性并不直接可行。

解决方案:结合Vue3的ref和CSSOM(CSS对象模型)API。在组件挂载后获取DOM列表高度,然后修改已定义的@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]; // 获取第一个样式表
      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)`;
            }
          }
          break; // 找到规则后跳出循环
        }
      }
    });

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

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

@keyframes scroll-animation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-300px); /* 初始值,会被动态修改 */
  }
}
</style>
登录后复制

代码说明:

  1. 使用ref获取.list元素的引用。
  2. onMounted钩子函数在组件挂载后执行,获取.list的高度listHeight。
  3. document.styleSheets[0]获取第一个样式表(假设@keyframes规则在第一个样式表中)。 注意:这可能需要根据实际情况调整,如果你的样式在其他style标签中,需要找到对应的样式表。
  4. 遍历样式表规则,找到名为scroll-animation的@keyframes规则。
  5. 修改100%关键帧的transform属性,将translateY值设置为动态计算的-listHeight。
  6. break语句在找到规则后跳出循环,提高效率。

此方法通过直接操作DOM和CSSOM来动态修改动画,确保动画高度与动态列表高度一致。 请注意,此方法依赖于浏览器对CSSOM API的支持。 为了更健壮的实现,可以添加错误处理和对不同浏览器CSSOM API差异的兼容性处理。 此外,考虑使用更现代化的状态管理方案,例如Pinia,来管理动画高度,可以使代码更易于维护和扩展。

以上就是Vue3中如何动态修改@keyframes动画高度以适应动态DOM列表?的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号