demo效果:

通过js修改元素的keyframes样式的使用场景非常少, 一般用于元素的动画末节点不固定且动画复杂(比如分为多段不同效果的动画);

记录一下方法, 权当保存一种思路.

demo调用:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#block { width: 20px; height: 20px; background: lightblue; position: absolute; left: 20px; top: 20px; }.ani { animation: myFrame .5s forwards; }.btn { position: absolute; left: 20px; top: 220px; }@keyframes myFrame {from { width: 20px; height: 20px; left: 20px; top: 20px; }to { width: 99px; height: 99px; left: 99px; top: 99px; }}</style>
</head>
<body><div id="block" class="ani"></div><button id="btn" class="btn">随机生成animation动效</button>
</body>
<script src="./editKeyframes.js"></script>
<script>
const frame_edit = _editKeyframes('myFrame')// 记录最后操作的目标点
let from_str = 'width: 99px; height: 99px; left: 99px; top: 99px;'const getRandom = () => { // 随机生成大于等于20且小于100的整数return Math.floor(Math.random() * 80 + 20)
}btn.onclick = () => {/*注* 如果在dom的className没有改变的情况下直接修改keyframes样式将无法实现动效 所以修改流程为: 去除dom的className -> 修改keyframes -> 重新给dom设置className(须异步修改)*/block.style = from_str // 在清除dom的className之前把dom的样式固定在动画的末端block.className = '' // 修改目标元素的classNameconst customStr = `width: ${getRandom()}px; height: ${getRandom()}px; left: ${getRandom()}px; top: ${getRandom()}px;`const keyframes_str = `{from { ${from_str}; }to { ${customStr} }}`from_str = customStrframe_edit(keyframes_str)setTimeout(() => { // 异步目标修改元素的classNameblock.className = 'ani'})
}
</script>
</html>

功能代码实现(editKeyframes.js):

/*** 修改名为keyframesName的keyframes样式 * * @param {String} keyframesName keyframes名称 * * @returns {Function} 柯里化后的最终处理方法函数 * * @example * const edit = _editKeyframes(KEYFRAMESNAME) * edit('from {...} to {...}')* * 注* 如果在dom的className没有改变的情况下直接修改keyframes样式将无法实现动效 *     所以修改流程为: 去除dom的className -> 修改keyframes -> 重新给dom设置className*/
export const _editKeyframes = (keyframesName) => {let sheetObj = nulllet ss = Array.from(document.styleSheets).filter(styleSheet => {return !styleSheet.href || styleSheet.href.startsWith(window.location.origin)})if (!!ss.length) {for (let i = 0; i < ss.length; ++i) {for (let j = 0; j < ss[i].cssRules.length; ++j) {if (ss[i].cssRules[j].type === window.CSSRule.KEYFRAMES_RULE && ss[i].cssRules[j].name === keyframesName) {sheetObj = {has: true,value: ss[i],}break}}if (sheetObj === null) {sheetObj = {has: false,value: ss[0],}}}} else {document.head.appendChild(document.createElement('style'))ss = Array.from(document.styleSheets).filter(styleSheet => {return !styleSheet.href || styleSheet.href.startsWith(window.location.origin)})sheetObj = {has: false,value: ss[0],}}return function (cssStr) {if (sheetObj.has) {const index = [...sheetObj.value.cssRules].findIndex(val => {return val.name === keyframesName})sheetObj.value.deleteRule(index)sheetObj.value.insertRule(`@keyframes ${keyframesName} ${cssStr}`)} else {sheetObj.value.insertRule(`@keyframes ${keyframesName} ${cssStr}`)sheetObj.has = true}}
}

js修改元素的keyframes样式相关推荐

JS 修改元素的内联样式
JS修改元素样式语法:元素.style.样式名=样式值例如:documents.getElementByName("demo").style.width="200px ...
JS修改标签的css样式
JS修改标签的css样式例:<span id='name'></span> js中修改id为name的span的样式 var name= document.getElemen ...
微信小程序之Js修改元素样式
微信小程序和普通的前端开发有很多不同. 后者修改样式js可以操作DOM,即 document.getElementById(id).style.property=new style 但是微信的js是没 ...
原生js获取元素并设置样式
下面我是通过class获取元素 <!DOCTYPE html> <html lang="en"><head><meta charset=& ...
js给元素添加class样式
图中,左侧和右侧都需要添加不同的class类样式结构: <div class="left"><div class="img_bg leftOne&qu ...
html 更改元素坐标,利用JS修改元素的位置属性，为什么style.left可行而style.top失效？...
Q.想利用JS中的move函数实现小图的斜线下移,但是明明代码几乎一样,left的移动可以实现,top却怎么也动不了台球桌 *{ padding:0; margin:0; } div{ backgr ...
JS 获取元素当前的样式信息
1 HTMLElement.prototype.__defineGetter__("currentStyle", function () { 2 return this.owner ...
JS的DOM操作1--获取元素与修改元素(附带动图案例)
1.获取元素与修改元素 https://blog.csdn.net/TroyeSivanlp/article/details/120580055 2.创建自定义属性和节点 https://blog.c ...
js操作元素：改变元素内容有两种方式： interText 和 innerHTML的区别，常用的元素的属性操作，仿电脑系统时间问好，表单元素的属性操作，案例：仿京东显示隐藏密码，样式属性操作
文章目录操作元素改变元素内容有两种方式: interText 和 innerHTML的区别常用的元素的属性操作案例:仿电脑系统时间问好表单元素的属性操作案例:仿京东显示隐藏密码样式属性操 ...

js修改元素的keyframes样式

demo效果:

通过js修改元素的keyframes样式的使用场景非常少, 一般用于元素的动画末节点不固定且动画复杂(比如分为多段不同效果的动画);

记录一下方法, 权当保存一种思路.

demo调用:

功能代码实现(editKeyframes.js):

js修改元素的keyframes样式相关推荐

最新文章

热门文章