在Vue3中，动态调整CSS的@keyframes属性以响应数据变化，例如根据动态DOM列表高度调整动画滚动距离，是一个常见需求。本文将演示如何解决这个问题，避免硬编码动画高度的局限性。
问题：如何根据后台返回的、数量不定的DOM列表高度，动态修改@keyframes动画的高度值？直接访问@keyframes属性并不直接可行。
解决方案：结合Vue3的ref和CSSOM（CSS对象模型）API。在组件挂载后获取DOM列表高度，然后修改已定义的@keyframes规则。
代码示例：
立即学习“前端免费学习笔记（深入）”；
代码说明：
- 使用
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，来管理动画高度，可以使代码更易于维护和扩展。
