![](/assets/img/weixin-blog.311ae013.png)
技术咨询、项目合作、广告投放、简历咨询、技术文档下载
点击这里 联系博主
# css如何动态修改keyframes
最近做了一个上线滚动文字的走马灯组件,通过关键帧@keyframes at-rule 来定义滚动; 由于我的数目是动态的,个数不定,所以需要动态计算左移的长度。
整体思路:
- 在样式中不指定
animation-name
,通过js
操作样式属性设置,这样生成keyframes
时,就不用去获取打包生成的名字。 - 样式直接插入最后的
styleSheets
中 - 在
js
中指定animationName
等属性
// 在全局定义名字
function createKeyFrames(props) {
const { name = "", count = "" } = props;
const length = `${name} + 我拥有的优惠券数量为: ${count}张专属券`.length * 12;
const keyframes = `
@keyframes talentPreLiminaryMoveToLeft {
0% {
position: absolute;
left: 0;
top: 0;
}
100% {
position: absolute;
left: -${length}px;
top: 0;
}
}
`;
const keyframesWebdit = `
@-webkit-keyframes talentPreLiminaryMoveToLeft {
0% {
position: absolute;
left: 0;
top: 0;
}
100% {
position: absolute;
left: -${length}px;
top: 0;
}
}
`;
const styleSheet = document.styleSheets[document.styleSheets.length - 1];
styleSheet.insertRule(keyframes, styleSheet.rules.length);
styleSheet.insertRule(keyframesWebdit, styleSheet.rules.length);
}
// jsx
<div
className={`demo`}
style={{
animationName: "talentPreLiminaryMoveToLeft",
animationDuration: "3s",
animationTimingFunction: "linear",
}}
>
</div>
...
可以尝试一下,使用动态插入 style
标签到 head
中是无效的。
- 本文链接: https://mrgaogang.github.io/javascript/base/css%E5%A6%82%E4%BD%95%E5%8A%A8%E6%80%81%E4%BF%AE%E6%94%B9keyframes.html
- 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 许可协议。转载请注明出处!