如何實(shí)現(xiàn)網(wǎng)站開(kāi)發(fā)太原網(wǎng)站建設(shè)制作
js動(dòng)態(tài)設(shè)置關(guān)鍵偵@keyframes
1.前置知識(shí)
關(guān)鍵偵@keyframes規(guī)則通過(guò)在動(dòng)畫(huà)序列中定義關(guān)鍵偵的樣式來(lái)控制CSS動(dòng)畫(huà)序列的中間步驟
@keyframes slidein {from {transform: translateX(0%);}to {transform: translateX(100%);}
}
// from 等價(jià)于 0%；to 等價(jià)與 100%
// 或者
@keyframes slidein {0% {top: 0;left: 0;}30% {top: 50px;}68%,72% {left: 50px;}100% {top: 100px;left: 100%;}
}
注意，如果在CSS中定義了兩個(gè)相同名字的keyframes，后這會(huì)覆蓋前者
如上圖所示，定義了兩個(gè)相同的動(dòng)畫(huà)偵之后，最終在瀏覽器中應(yīng)用的是后者
2.js動(dòng)態(tài)控制keyframes
背景
在 Vue 項(xiàng)目中由于 css 樣式是直接寫(xiě)在 style 標(biāo)簽中的，那些值都是事先寫(xiě)死的，比如說(shuō)上面的 translateX（disX）,disX 是通過(guò) js 動(dòng)態(tài)計(jì)算出來(lái)的。如果要實(shí)現(xiàn)動(dòng)畫(huà)的效果是通過(guò)js動(dòng)態(tài)計(jì)算出來(lái)的，會(huì)比較困難。所以可以通過(guò) js 去設(shè)置 styleSheet 里面的樣式規(guī)則，從而能夠動(dòng)態(tài)的控制 keyframes
StyleSheet是javaScript中表示樣式表的接口，而styleSheet是一個(gè)DOM元素的對(duì)應(yīng)屬性，用于獲取該元素所關(guān)聯(lián)的樣式表
- 獲取樣式表：通過(guò)
styleSheet屬性可以獲取元素關(guān)聯(lián)的樣式表
// 獲取第一個(gè)樣式表
const firstStyleSheet = document.styleSheet[0]
// document.styleSheet 可以理解為一個(gè)二維數(shù)組（但是不是數(shù)組）
// 有多個(gè)樣式表，每個(gè)樣式表中都有多條規(guī)則
- 插入樣式列表：通過(guò)樣式列表的
insertRules方法可以在樣式列表中插入新的規(guī)則
const styleSheet = document.styleSheet[0]
styleSheet.insertRule(`.styleSheetCls { width: 200px; height: 200px}`,0)
// insertRule 方法中的第二個(gè)參數(shù)表示將樣式插入樣式表的哪里
// 這個(gè)規(guī)則會(huì)出現(xiàn)在第一個(gè)樣式表的第一條
- 刪除樣式規(guī)則：使用樣式表的
deleteRule方法可以刪除指定位置的規(guī)則
const styleSheet = document.styleSheet[0]
styleSheet.deleteRule(0)
// 刪除第一個(gè)樣式表的第一條
我們可以通過(guò)styleSheet的insertRule方法動(dòng)態(tài)的添加關(guān)鍵偵樣式
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>動(dòng)態(tài)添加 Keyframes</title><style id="dynamic-styles"></style>
</head>
<body><div id="myDiv"></div><script>// 獲取樣式表// 這里始終將新的 keyframes 規(guī)則添加在第一個(gè)樣式表的第一條const styleSheet = document.styleSheet[0];let dis = 0//... 動(dòng)態(tài)計(jì)算 dis 的值// 動(dòng)態(tài)創(chuàng)建 @keyframesconst keyframesName = 'dynamicAnimation';const keyframesRule = `@keyframes ${keyframesName} {0% { transform: translateX(${dis}px); }25% { transform: translateX(-${dis}px) rotate(0.5deg); }50% { transform: translateX(${dis}px) rotate(-0.5deg); }75% { transform: translateX(-${dis}px) rotate(0.5deg); }100% { transform: translateX(0); }}``@keyframes dynamicAnimation{0% { transform: translateX(5px); }100% { transform: translateX(0); }}`// 每次添加新的規(guī)則之前，可以將之前的規(guī)則給刪除掉，這樣就可以避免第一個(gè)樣式表的規(guī)則里面有多條重復(fù)名稱(chēng)的 keyframes，避免相同名字的 keyframes 前者被后者覆蓋// 獲取第一個(gè)樣式表的第一條規(guī)則的名稱(chēng)const firstRules = styleSheet.rules || styleSheet.cssRules// 這里是以防第一條規(guī)則不是 keyframes 規(guī)則，從而導(dǎo)致獲取 name 失敗const ruleName = firstRules[0].name ? firstRules[0].name : ''if(ruleName === keyframesName) {/*** 這里能夠直接刪除，是因?yàn)槲沂冀K將 keyframes 添加在第一個(gè)樣式表的第一條規(guī)則中* 如果不能確定樣式位置，那么就需要遍歷整個(gè)樣式表，找到目標(biāo)樣式表的位置* document.styleSheet 可以理解為一個(gè)二維數(shù)組（但是不是數(shù)組，不適合使用數(shù)組的遍歷方式進(jìn)行遍歷）* 有多個(gè)樣式表，每個(gè)表中都有多條規(guī)則**/ styleSheet.deleteRule(0)}// 這里始終將新的 keyframes 規(guī)則添加在第一個(gè)樣式表的第一條styleSheet.insertRule(keyframesRule, 0);// 動(dòng)態(tài)應(yīng)用 @keyframesconst myDiv = document.getElementById('myDiv');myDiv.style.animation = `${keyframesName} 2s ease-in-out`;</script>
</body>
</html>
3. 編寫(xiě)技巧
- 在編寫(xiě)
keyframes規(guī)則時(shí)，我比較推薦在在style標(biāo)簽中將動(dòng)畫(huà)規(guī)則寫(xiě)好了在復(fù)制到JavaScript邏輯代碼中，因?yàn)槿绻麆?dòng)畫(huà)規(guī)則編寫(xiě)有問(wèn)題，那么在insertRule插入樣式的時(shí)候，可能會(huì)導(dǎo)致樣式表識(shí)別不了 - 查看是否添加成功，可以在控制臺(tái)打印出來(lái)樣式表，尋找我們添加的規(guī)則，如下圖
可以看到第一個(gè)樣式表中的第一個(gè)樣式是我們添加的keyframes樣式，并且識(shí)別成功了會(huì)有CSSKeyframesRule的屬性，里面就是我們定義的每一幀的動(dòng)畫(huà)樣式