Question

我有这个动画，我想让它重复无限，但是当有人单击它时，我希望它停止并且永远不会再开始，有办法吗？谢谢！

HTML：

<div class="container">

  <a class="carousel-control-prev mr-5" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>

  <div class="clickme bounceIn d-flex flex-column">click me</div>

  <a class="carousel-control-next bounceIn" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

</div>

CSS：

.bounceIn {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
    animation-delay: 5s;
    -webkit-animation-iteration-count: infinite;
}

Answer 1

您可以使用此

const yourButton = document.querySelector("#yourButton");
const bounceIn = document.querySelector(".bounceIn");

yourButton.addEventListener("click",function(){
  bounceIn.style.animationPlayState = "paused";
});

Answer 2

谢谢我这样做：

$(".stop-animation").click(function(){
  $(".bounceIn").css("animation", "none");
});
$(".stop-animation").click(function(){
  $(".clickme").css("animation", "none");
});

在点击时停止无限的CSS动画？

2 个答案: