首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >JavaScript媒体查询和CSS动画的问题

JavaScript媒体查询和CSS动画的问题
EN

Stack Overflow用户
提问于 2018-09-15 03:59:58
回答 1查看 72关注 0票数 0

我在一个我正在工作的网站上遇到了一个小问题,但这让我头疼。我同时使用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>

EN

回答 1

Stack Overflow用户

发布于 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>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52338535

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档