seo网站诊断分析报告,怎样下载网站模板,网站建设明薇通网络,wordpress 改为中文字体js动态设置关键侦keyframes
1.前置知识
关键侦keyframes规则通过在动画序列中定义关键侦的样式来控制CSS动画序列的中间步骤
keyframes slidein {from {transform: translateX(0%);}to {transform: translateX(100%);}
}
// from 等价于 0%#xff1b;to 等价与 100%
// 或…js动态设置关键侦keyframes
1.前置知识
关键侦keyframes规则通过在动画序列中定义关键侦的样式来控制CSS动画序列的中间步骤
keyframes slidein {from {transform: translateX(0%);}to {transform: translateX(100%);}
}
// from 等价于 0%to 等价与 100%
// 或者
keyframes slidein {0% {top: 0;left: 0;}30% {top: 50px;}68%,72% {left: 50px;}100% {top: 100px;left: 100%;}
}注意如果在CSS中定义了两个相同名字的keyframes后这会覆盖前者 如上图所示定义了两个相同的动画侦之后最终在浏览器中应用的是后者
2.js动态控制keyframes 背景 在 Vue 项目中由于 css 样式是直接写在 style 标签中的那些值都是事先写死的比如说上面的 translateXdisX,disX 是通过 js 动态计算出来的。如果要实现动画的效果是通过js动态计算出来的会比较困难。所以可以通过 js 去设置 styleSheet 里面的样式规则从而能够动态的控制 keyframes StyleSheet是javaScript中表示样式表的接口而styleSheet是一个DOM元素的对应属性用于获取该元素所关联的样式表
获取样式表通过styleSheet属性可以获取元素关联的样式表
// 获取第一个样式表
const firstStyleSheet document.styleSheet[0]
// document.styleSheet 可以理解为一个二维数组但是不是数组
// 有多个样式表每个样式表中都有多条规则插入样式列表通过样式列表的insertRules方法可以在样式列表中插入新的规则
const styleSheet document.styleSheet[0]
styleSheet.insertRule(.styleSheetCls { width: 200px; height: 200px},0)
// insertRule 方法中的第二个参数表示将样式插入样式表的哪里
// 这个规则会出现在第一个样式表的第一条删除样式规则使用样式表的deleteRule方法可以删除指定位置的规则
const styleSheet document.styleSheet[0]
styleSheet.deleteRule(0)
// 删除第一个样式表的第一条我们可以通过styleSheet的insertRule方法动态的添加关键侦样式
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title动态添加 Keyframes/titlestyle iddynamic-styles/style
/head
bodydiv idmyDiv/divscript// 获取样式表// 这里始终将新的 keyframes 规则添加在第一个样式表的第一条const styleSheet document.styleSheet[0];let dis 0//... 动态计算 dis 的值// 动态创建 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); }}// 每次添加新的规则之前可以将之前的规则给删除掉这样就可以避免第一个样式表的规则里面有多条重复名称的 keyframes避免相同名字的 keyframes 前者被后者覆盖// 获取第一个样式表的第一条规则的名称const firstRules styleSheet.rules || styleSheet.cssRules// 这里是以防第一条规则不是 keyframes 规则从而导致获取 name 失败const ruleName firstRules[0].name ? firstRules[0].name : if(ruleName keyframesName) {/*** 这里能够直接删除是因为我始终将 keyframes 添加在第一个样式表的第一条规则中* 如果不能确定样式位置那么就需要遍历整个样式表找到目标样式表的位置* document.styleSheet 可以理解为一个二维数组但是不是数组不适合使用数组的遍历方式进行遍历* 有多个样式表每个表中都有多条规则**/ styleSheet.deleteRule(0)}// 这里始终将新的 keyframes 规则添加在第一个样式表的第一条styleSheet.insertRule(keyframesRule, 0);// 动态应用 keyframesconst myDiv document.getElementById(myDiv);myDiv.style.animation ${keyframesName} 2s ease-in-out;/script
/body
/html3. 编写技巧
在编写keyframes规则时我比较推荐在在style标签中将动画规则写好了在复制到JavaScript逻辑代码中因为如果动画规则编写有问题那么在insertRule插入样式的时候可能会导致样式表识别不了查看是否添加成功可以在控制台打印出来样式表寻找我们添加的规则如下图 可以看到第一个样式表中的第一个样式是我们添加的keyframes样式并且识别成功了会有CSSKeyframesRule的属性里面就是我们定义的每一帧的动画样式
