我在我正在工作的网站上遇到了一个小问题,但真是伤脑筋。 我同时使用CSS动画和JavaScript媒体查询。 断点为768像素,并触发一个事件,其中第二个div附加到第一个div。 每个div都包含一个动画元素。 问题在于,函数触发时,附加元素的动画会重新启动(而另一个元素的动画保持稳定)。

我想找到一种方法,使每次穿过断点时,附加元素的动画都不会重新启动。 我很确定这与以下事实有关:附加的子代在DOM中“重新出现”,导致动画重新启动。 Bur,我不知道该如何解决。 每一点帮助将不胜感激。 谢谢。

 //---Start of Square Color Animation--- function colorSquare1() { var square1Blue = document.getElementById("square-1"); var square2Red = document.getElementById("square-2"); if (square1Blue.classList.contains("square-animation-blue")) { document.getElementById("square-1").classList.toggle("square-animation-red"); } else { document.getElementById("square-1").classList.toggle("square-animation-blue"); } if (square2Red.classList.contains("square-animation-blue")) { document.getElementById("square-2").className = "square"; } } function colorSquare2() { var square2Blue = document.getElementById("square-2"); var square1Red = document.getElementById("square-1"); if (square2Blue.classList.contains("square-animation-blue")) { document.getElementById("square-2").classList.toggle("square-animation-red"); } else { document.getElementById("square-2").classList.toggle("square-animation-blue"); } if (square1Red.classList.contains("square-animation-blue")) { document.getElementById("square-1").className = "square"; } } //---End of Square Color Animation--- //---Start of Queries Animation--- function myFunction(x) { if (x.matches) { var mainContainer = document.getElementById("container-1"); var square2 = document.getElementById("square-container-2"); mainContainer.appendChild(square2); } else { var square2 = document.getElementById("square-container-2"); var secondContainer = document.getElementById("container-2"); secondContainer.appendChild(square2); } } var x = window.matchMedia("(min-width: 768px)") myFunction(x) x.addListener(myFunction) //---End of Queries Animation--- 
 #container { max-width: 72px; margin: 0 auto; } .square { width: 54px; height: 54px; background-color: red; display: block; margin-bottom: 20px; } .square-animation-blue { animation-name: changeToBlue; animation-duration: 0.5s; animation-fill-mode: forwards; } @keyframes changeToBlue { from { background-color: red; } to { background-color: blue; } } .square-animation-red { animation-name: changeToRed; animation-duration: 0.5s; animation-fill-mode: forwards; } @keyframes changeToRed { from { background-color: blue; } to { background-color: red; } } 
 <div id="container"> <div id="container-1"> <div id="square-container-1"> <a href="#" id="square-1" class="square" onclick="colorSquare1()"></a> </div> </div> <div id="container-2"> <div id="square-container-2"> <a href="#" id="square-2" class="square" onclick="colorSquare2()"></a> </div> </div> </div> 

#1楼 票数:0

除了使用动画,您还可以使用CSS transition属性。

.square-animation-blue{
    transition: background-color 0.5s;
    background-color: blue;
}

CSS转换: https//www.w3schools.com/css/css3_transitions.asp

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> #container{ max-width: 72px; margin: 0 auto; } .square{ width: 54px; height: 54px; background-color: red; display: block; margin-bottom: 20px; } .square-animation-blue{ transition: background-color 0.5s; background-color: blue; } .square-animation-red{ transition: background-color 0.5s; background-color: red; } </style> </head> <body> <div id="container"> <div id="container-1"> <div id="square-container-1"> <a href="#" id="square-1" class="square" onclick="colorSquare1()"></a> </div> </div> <div id="container-2"> <div id="square-container-2"> <a href="#" id="square-2" class="square" onclick="colorSquare2()"></a> </div> </div> <script> //---Start of Square Color Animation--- function colorSquare1() { var square1Blue = document.getElementById("square-1"); var square2Red = document.getElementById("square-2"); if (square1Blue.classList.contains("square-animation-blue")) { document.getElementById("square-1").classList.toggle("square-animation-red"); } else { document.getElementById("square-1").classList.toggle("square-animation-blue"); } if (square2Red.classList.contains("square-animation-blue")) { document.getElementById("square-2").className = "square"; } } function colorSquare2() { var square2Blue = document.getElementById("square-2"); var square1Red = document.getElementById("square-1"); if (square2Blue.classList.contains("square-animation-blue")) { document.getElementById("square-2").classList.toggle("square-animation-red"); } else { document.getElementById("square-2").classList.toggle("square-animation-blue"); } if (square1Red.classList.contains("square-animation-blue")) { document.getElementById("square-1").className = "square"; } } //---End of Square Color Animation--- //---Start of Queries Animation--- function myFunction(x) { if (x.matches) { console.log("moved to container 1"); var mainContainer = document.getElementById("container-1"); var square2 = document.getElementById("square-container-2"); mainContainer.appendChild(square2); } else { console.log("moved to container 2"); var square2 = document.getElementById("square-container-2"); var secondContainer= document.getElementById("container-2"); secondContainer.appendChild(square2); } } var x = window.matchMedia("(min-width: 768px)") myFunction(x) x.addListener(myFunction) //---End of Queries Animation--- </script> </div> </body> </html> 

  ask by David Sarrà translate from so

未解决问题?本站智能推荐:

2回复

使用CSS动画进行媒体查询

我正在尝试一些沉重的CSS3东西,并遇到一些我希望可以解决的问题: 1 - 我有一个装载页面时滑入的框。 让我们说: 但是,在我的媒体查询中,由于一些调整大小,我需要将其修改为: 我以为我可以保持动画名称相同,只是重新定义其中一个@media查询中的关键帧,但这似乎不起作
2回复

媒体查询后css动画未触发

我有一个看起来像这样的清单 我宣布了2个动画 然后在我的CSS我有这个: 因此,这很完美,当屏幕小于767px时,列表中的所有项目从右向右滑动,而当屏幕更大时,则从左侧向左滑动。 当我调整屏幕大小时,动画会再次播放。 现在,当屏幕大于767px时,我希望列表中的所
2回复

将@media查询与javascript结合以动态更改CSS

如果有人向下滚动页面,我将使用以下代码更改thead CSS 我想根据屏幕尺寸使用媒体查询来更改CSS。 例如,“头”为: html代码是: 我的问题是媒体查询不起作用...
4回复

在 JavaScript 中使用媒体查询或在 CSS 中使用 if/else 语句

我正在构建一个具有可自定义打印设置的网页。发生的情况是,无论何时单击打印按钮,都会打开一个对话框(我使用onclick属性和一些 js)。 对话框中有一些复选框,它们的名称如下: 删除菜单 删除侧边栏 删除链接和按钮 删除评论 所以,我想要的是,每当用户单击复选框时,链接的项目就会从@
2回复

通过javascript更改CSS的媒体查询

有没有办法通过javascript更改网站的实际媒体查询? 我正在开发客户网站上的iframe中包含的应用程序,该应用程序将重新计算主体的宽度以将面板放置在右侧。 调整浏览器的大小时,将调用客户端的媒体查询并采取行动,而不会考虑我的iframe,从而导致布局混乱。 您是否看到我可以
1回复

启动CSS动画JavaScript

如何用js启动CSS动画? 第一行(webkitAnimation)有效但其他行则无效。 为什么? 实时预览 (点击Ninja Star)
8回复

在 JavaScript 中触发 CSS 动画

我不知道如何使用 JQuery,所以我需要一种只能使用 JavaScript 触发动画的方法。 当用户滚动页面时,我需要调用/触发 CSS 动画。 function start() { document.getElementById('logo').style.animation
2回复

如何在CSS媒体查询中使用EM与JavaScript事件对齐?

我一直在研究一个项目,我认为在表达长度时,使用em是事实上的单位。 我通常采用的方法是将body和html元素设置为所需的px大小,将所有其他元素设置为1em。 在那之后剩下的就是他们 。 直到今天早上,这似乎是一个很好的计划,直到我发现媒体查询似乎没有考虑基体和html px值。