在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>
代码说明：
- 使用ref获取.list元素的引用。
- onMounted钩子函数在组件挂载后执行，获取.list的高度listHeight。
- document.styleSheets[0]获取第一个样式表（假设@keyframes规则在第一个样式表中）。 注意：这可能需要根据实际情况调整，如果你的样式在其他style标签中，需要找到对应的样式表。
- 遍历样式表规则，找到名为scroll-animation的@keyframes规则。
- 修改100%关键帧的transform属性，将translateY值设置为动态计算的-listHeight。
- break语句在找到规则后跳出循环，提高效率。
此方法通过直接操作DOM和CSSOM来动态修改动画，确保动画高度与动态列表高度一致。 请注意，此方法依赖于浏览器对CSSOM API的支持。 为了更健壮的实现，可以添加错误处理和对不同浏览器CSSOM API差异的兼容性处理。 此外，考虑使用更现代化的状态管理方案，例如Pinia，来管理动画高度，可以使代码更易于维护和扩展。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
