在vue3中，動態(tài)調(diào)整css的@keyframes屬性以響應(yīng)數(shù)據(jù)變化，例如根據(jù)動態(tài)dom列表高度調(diào)整動畫滾動距離，是一個常見需求。本文將演示如何解決這個問題，避免硬編碼動畫高度的局限性。
問題：如何根據(jù)后臺返回的、數(shù)量不定的DOM列表高度，動態(tài)修改@keyframes動畫的高度值？直接訪問@keyframes屬性并不直接可行。
解決方案：結(jié)合vue3的ref和CSSOM（CSS對象模型）API。在組件掛載后獲取DOM列表高度，然后修改已定義的@keyframes規(guī)則。
代碼示例：
立即學習“前端免費學習筆記（深入）”；
<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; // 找到規(guī)則后跳出循環(huán) } } }); return { list }; }, }; </script> <style scoped> .list { animation: scroll-animation 5s infinite linear; } @keyframes scroll-animation { 0% { transform: translateY(0); } 100% { transform: translateY(-300px); /* 初始值，會被動態(tài)修改 */ } } </style>
代碼說明：
- 使用ref獲取.list元素的引用。
- onMounted鉤子函數(shù)在組件掛載后執(zhí)行，獲取.list的高度listHeight。
- document.styleSheets[0]獲取第一個樣式表（假設(shè)@keyframes規(guī)則在第一個樣式表中）。 注意：這可能需要根據(jù)實際情況調(diào)整，如果你的樣式在其他style標簽中，需要找到對應(yīng)的樣式表。
- 遍歷樣式表規(guī)則，找到名為scroll-animation的@keyframes規(guī)則。
- 修改100%關(guān)鍵幀的transform屬性，將translateY值設(shè)置為動態(tài)計算的-listHeight。
- break語句在找到規(guī)則后跳出循環(huán)，提高效率。
此方法通過直接操作DOM和CSSOM來動態(tài)修改動畫，確保動畫高度與動態(tài)列表高度一致。 請注意，此方法依賴于瀏覽器對CSSOM API的支持。 為了更健壯的實現(xiàn)，可以添加錯誤處理和對不同瀏覽器CSSOM API差異的兼容性處理。 此外，考慮使用更現(xiàn)代化的狀態(tài)管理方案，例如Pinia，來管理動畫高度，可以使代碼更易于維護和擴展。
? 版權(quán)聲明
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載。
THE END
