如何检测CSS3动画或Web动画API所做的更改？

本文介绍了如何检测CSS3动画或Web动画API所做的更改？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 如何检测CSS3动画或网络动画（ Element.animate ）所做的更改？ （对不起我的英语不好！这是我在Stackoverflow中的第一个问题） 我了解MutationObserver，它仅在更改内联样式或使用 requestAnimationFrame （因为我使用它更改了内联样式）。但是，如果我使用CSS3动画或Web动画，则MutationObserver不会响应，因为它们不会更改内联样式。 请参阅此处...这里有两个div ... div1，div2。 div2的位置更改时div1的位置也会更改。但这只有在我按照我之前所说的那样使用requestAnimationFrame时才会发生。 我的问题是如何为css3动画和Web动画（Element.animate）做到这一点？ const div1 = document.getElementById（'div1'）; const div2 = document.getElementById（'div2'）; / * ****添加突变观察者以检测变化***** / const突变=新的MutationObserver（mutations => {div1.style.left = div2.style.left;}）; mutation.observe（div2，{属性：true}）; / *****带CSS的动画***** /功能cssAnimation（）{div2.style.animation ='anim 1.5s linear';} / *****带网络动画的动画* **** / function webAnimation（）{div2.animate（{left：[0，'500px']}}，{持续时间：1500，缓动：'linear'}）;} / *****带有requestAnimationFrame的动画* ***** //// div2const left的当前左侧位置= 0; function requestAnimation（）{//将每个关键帧的左侧位置增加5px div2.style.left =`$ {（left + = 5）} px`; //如果（left< 500）{requestAnimationFrame（requestAnimation）; }}函数clearAnimations（）{左= 0; div2.style.left = 0; div2.style.animation ='unset';} @动画关键帧{自{左：0; }至{左：500px; }}＃div1 {背景：橙色；宽度：100px；高度：100px；位置：绝对；顶部：200像素；}＃div2 {背景：浅绿色；宽度：100px；高度：100px；位置：绝对； top：100px;} < div id = buttons > < h3>使用...制作动画< / h3> < button onclick =’cssAnimation（）’> Css3< / button> < button onclick = requestAnimation（）>请求动画帧< / button> < button onclick = webAnimation（）>网络动画api< / button> < button id = clear onclick = clearAnimations（）>清除< / button>< / div>< div id = div1> Div1< / div>< div id = div2> div2< / div> 解决方案您可以使用 requestAnimationFrame 和 window.getComputedStyle（）来获取动画期间的当前动画样式，请注意，包括 fill：转发 在 Element.animate（）调用 var div1 = document.getElementById（ div1）; var div2 = document.getElementById（ div2）; / ** ***添加变异观察者以检测变化***** / var变异=新的MutationObserver（function（mutations）{div1.style.left = div2.style.left;}）; mutation.observe（div2，{属性： true}）; / *****带CSS的动画***** /功能cssAnimation（）{div2.style.animation =动画1.5s线性向前;让animationFrame;函数getCurrentStyles（）{console.log（window.getComputedStyle（div2）.left）; animationFrame = requestAnimationFrame（getCurrentStyles）} getCurrentStyles（）; div2.addEventListener（ animationend，（）=> gt; cancelAnimationFrame（animationFrame））;} / *****带有网络动画的动画***** / function webAnimation（）{let animationFrame;函数getCurrentStyles（）{console.log（window.getComputedStyle（div2）.left）; animationFrame = requestAnimationFrame（getCurrentStyles）} getCurrentStyles（）; div2.animate（{左：[0， ​​500px]}，{持续时间：1500，填充：前进，缓动：线性}）。onfinish = function（）{cancelAnimationFrame（animationFrame）; console.log（window.getComputedStyle（div2）.left）; };} / *****带有requestAnimationFrame的动画****** /// div2的当前左位置var left = 0;函数requestAnimation（）{//每个关键帧div5.style.left =左位置增加5px $ {（left + = 5）} px`; console.log（window.getComputedStyle（div2）.left）; //如果（left< 500）{requestAnimationFrame（requestAnimation）; }}函数clearAnimations（）{左= 0; div2.style.left = 0; div2.style.animation =未设置;} @动画关键帧{自{左：0; }至{左：500px; }}＃div1 {背景：橙色；宽度：100px；高度：100px；位置：绝对；顶部：200像素；}＃div2 {背景：浅绿色；宽度：100px；高度：100px；位置：绝对； top：100px;} < div id = buttons > < h3>使用...制作动画< / h3> < button onclick =’cssAnimation（）’> Css3< / button> < button onclick = requestAnimation（）>请求动画帧< / button> < button onclick = webAnimation（）>网络动画api< / button> < button id = clear onclick = clearAnimations（）>清除< / button>< / div>< div id = div1> Div1< / div>< div id = div2> div2< / div> How can I detect changes made by CSS3 animations or web animations (Element.animate)??(Sorry for my bad English! this is my first question in Stackoverflow)I know about MutationObserver, it responds only if I change the inline style or if I use requestAnimationFrame (since I change the inline style using it). But if I use CSS3 animations or Web animations, MutationObserver doesn't respond since they don't change the inline style.See this... There are two divs here... div1, div2. div1's position will change when div2's position changes. But this happens only if I use requestAnimationFrame as I said before.My question is how can I do this for css3 animations and web animations (Element.animate)?const div1 = document.getElementById('div1');const div2 = document.getElementById('div2');/***** Add mutation observer to detect change *****/const mutation = new MutationObserver(mutations => { div1.style.left = div2.style.left;});mutation.observe(div2, { attributes: true});/***** Animation with css *****/function cssAnimation() { div2.style.animation = 'anim 1.5s linear';}/***** Animation with web animations *****/function webAnimation() { div2.animate({ left: [0, '500px'] }, { duration: 1500, easing: 'linear' });}/*****Animation with requestAnimationFrame ******/// Current left position of div2const left = 0;function requestAnimation() { // Increase left position 5px per keyframe div2.style.left = `${(left += 5)}px`; // Increase left position until it reaches to 500px if (left < 500) { requestAnimationFrame(requestAnimation); }}function clearAnimations() { left = 0; div2.style.left = 0; div2.style.animation = 'unset';}@keyframes anim { from { left: 0; } to { left: 500px; }}#div1 { background: orange; width: 100px; height: 100px; position: absolute; top: 200px;}#div2 { background: lightgreen; width: 100px; height: 100px; position: absolute; top: 100px;}<div id="buttons"> <h3>Animate with...</h3> <button onclick='cssAnimation()'>Css3</button> <button onclick="requestAnimation()">request animation frame</button> <button onclick="webAnimation()">web animations api</button> <button id="clear" onclick="clearAnimations()">Clear</button></div><div id="div1"> Div1</div><div id="div2"> div2</div> 解决方案 You can use requestAnimationFrame and window.getComputedStyle() to get current animated styles during the animation, note, included fill:"forward" at Element.animate() callvar div1 = document.getElementById("div1");var div2 = document.getElementById("div2");/***** Add mutation observer to detect change *****/var mutation = new MutationObserver(function(mutations) { div1.style.left = div2.style.left;});mutation.observe(div2, { attributes: true});/***** Animation with css *****/function cssAnimation() { div2.style.animation = "anim 1.5s linear forwards"; let animationFrame; function getCurrentStyles() { console.log(window.getComputedStyle(div2).left); animationFrame = requestAnimationFrame(getCurrentStyles) } getCurrentStyles(); div2.addEventListener("animationend", () => cancelAnimationFrame(animationFrame));}/***** Animation with web animations *****/function webAnimation() { let animationFrame; function getCurrentStyles() { console.log(window.getComputedStyle(div2).left); animationFrame = requestAnimationFrame(getCurrentStyles) } getCurrentStyles(); div2.animate({ left: [0, "500px"] }, { duration: 1500, fill: "forwards", easing: "linear" }).onfinish = function() { cancelAnimationFrame(animationFrame); console.log(window.getComputedStyle(div2).left); };}/*****Animation with requestAnimationFrame ******///Current left position of div2var left = 0;function requestAnimation() { //Increase left position 5px per keyframe div2.style.left = `${(left += 5)}px`; console.log(window.getComputedStyle(div2).left); //Increase left position until it reaches to 500px if (left < 500) { requestAnimationFrame(requestAnimation); }}function clearAnimations() { left = 0; div2.style.left = 0; div2.style.animation = "unset";}@keyframes anim { from { left: 0; } to { left: 500px; }}#div1 { background: orange; width: 100px; height: 100px; position: absolute; top: 200px;}#div2 { background: lightgreen; width: 100px; height: 100px; position: absolute; top: 100px;}<div id="buttons"> <h3>Animate with...</h3> <button onclick='cssAnimation()'>Css3</button> <button onclick="requestAnimation()">request animation frame</button> <button onclick="webAnimation()">web animations api</button> <button id="clear" onclick="clearAnimations()">Clear</button></div><div id="div1"> Div1</div><div id="div2"> div2</div> 这篇关于如何检测CSS3动画或Web动画API所做的更改？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！