如何在JavaScript中播放多个CSS动画？

问题描述

对于如何使用javascript触发一个元素的多个动画，我有些困惑。

我正在尝试使元素（.hud）淡入并在单击时反弹。目前，它只会做一个或另一个。第二个动画类将在单击事件中添加到元素。添加了类，但动画无法播放。我该如何构造我的代码以使动画淡入并在单击时反弹？

<!DOCTYPE html>
<html>
<head>

<style> 
.anim {
  animation-name: bounceIn_1;
  animation-duration: .5s;
}

.hud {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: fade-in;
  animation-duration: .5s;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes bounceIn_1{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}

</style>
</head>
<body>

<p>This Box should fade in and bounce on click</p>

<div class="hud"></div>

<script>

element = document.querySelector('.hud');
  console.log(element);

// reset the transition by...
element.addEventListener("click",function(e) {
  console.log("clicked");
  e.preventDefault;
  element.classList.remove("anim");
  void element.offsetWidth;
  element.classList.add("anim");
},false);
</script>
</body>
</html>

解决方法

您是否有必要？为了使示例中的动画能够持续工作，需要重置功能。

element = document.querySelector('#red_box');
  console.log(element);

element.addEventListener("click",function(e) {
  e.preventDefault;
  console.log("clicked");
  element.classList.remove("hud");
  element.classList.remove("anim");
  void element.offsetWidth;
  element.classList.add("anim");
},false);

/*$(".hud").click(function () {
    var $this = $(this);
    $this = reset($this);
    $this.addClass("anim bounceIn_1");
    console.log("clicked");
});*/

.anim {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: bounceIn_1;
  animation-duration: .5s;
}

.hud {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: fade-in;
  animation-duration: .5s;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes bounceIn_1 {0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <p>This box should fade in and bounce on click</p>
  <div id="red_box" class="hud"></div>
</body>

您是否尝试过在.anim类中添加逗号？

animation: bounceIn_1 .5s,fade-in .5s

您需要将2个动画放在相同的CSS类中，并确保在2个单独的帧中完成该类的删除和添加。
通过在.anim类中的两个动画之间添加逗号，可以轻松解决第一个问题。
第二个问题有些棘手，但是window.requestAnimationFrame（）函数可以解决这个问题！
在这里，您具有修改后的代码，以便您更好地理解：

element = document.querySelector('.hud');
  console.log(element);

// reset the transition by...
element.addEventListener("click",function(e) {
  console.log("clicked");
  e.preventDefault;
  element.classList.remove("anim");
  void element.offsetWidth;
  window.requestAnimationFrame(() => element.classList.add("anim")); /* The add() will be done before the next repaint so that we can see the change */
},false);

.anim {
  animation-name: fade-in,bounceIn_1;
  animation-duration: .5s;
}

.hud {
  width: 100px;
  height: 100px;
  background-color: red;
  //animation-name: fade-in; /* Remove this */
  //animation-duration: .5s; /* Remove this */
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes bounceIn_1{0%,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}

<body>
  <p>This box should fade in and bounce on click</p>
  <div class="hud"></div>
</body>

快速提示：使用此方法，您可以在同一元素上播放任意数量的动画，只需将其名称添加到.anim动画列表中就可以了！

animation animation animation html javascript

如何在JavaScript中播放多个CSS动画？

问题描述

解决方法

相关问答