我在一个我正在工作的网站上遇到了一个小问题,但这让我头疼。我同时使用CSS动画和JavaScript媒体查询。断点是768px,这会触发一个事件,其中第二个div被附加到第一个div之后。每个div都包含一个动画元素。问题是当函数触发时,附加元素的动画会重新启动(而另一个元素的动画保持稳定)。
我想找到一种方法,使附加元素的动画不会在您每次跨越断点时重新启动。我很确定这与附加的childs在DOM中“重新出现”导致动画重启有关。但是我不知道怎么解决这个问题。每一点帮助都会令人感激不已。谢谢。
//---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>
发布于 2018-09-15 05:38:20
您可以使用CSS过渡属性而不是使用动画。
.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>
https://stackoverflow.com/questions/52338535
复制相似问题