在Vue3中动态调整CSS动画，特别是@keyframes属性，并非直接操作样式表那么简单。本文将详细讲解如何利用Vue3的ref、onMounted和CSSOM API来动态获取DOM列表高度并应用于@keyframes动画。
问题：开发者需要根据后端返回的动态数据列表高度来调整动画滚动效果，而预设动画高度是固定的。直接操作style.sheet无法访问@keyframes规则，因为这种方法无法直接操作CSS规则。
解决方案：利用Vue3组件生命周期和CSSOM API动态修改样式。在onMounted钩子函数中获取DOM元素高度，然后使用CSSOM API遍历样式表，找到对应的@keyframes规则，并修改关键帧的transform属性。
代码示例：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
<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]; // 假设@keyframes规则在第一个样式表中
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)`;
}
}
}
}
});
return { list };
},
};
</script>
<style scoped>
.list {
animation: scroll-animation 5s infinite linear;
}
@keyframes scroll-animation {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-300px); /* 初始值 */
}
}
</style>
代码解释：
-
onMounted钩子函数在组件挂载后执行，获取list元素的高度。 -
document.styleSheets[0]获取第一个样式表（需根据实际情况调整索引）。 - 循环遍历样式表规则，找到名为
scroll-animation的@keyframes规则。 - 循环遍历关键帧，找到
100%关键帧，并修改其transform属性的translateY值，使其与动态获取的listHeight相对应。
注意：document.styleSheets[0]假设@keyframes规则在第一个样式表中，实际应用中可能需要调整索引。 为了更稳健的代码，建议使用更精确的样式表选择方法，例如通过document.querySelector('style')选择特定的<style></style>标签，或者使用更高级的CSS选择器来定位目标样式规则。 此外，考虑错误处理，例如当没有找到@keyframes规则的情况。
