在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，来管理动画高度，可以使代码更易于维护和扩展。
