javascript - 在 setTimeOut 中用 addClass 实现的点击动画只发生 oinceWhat

Question

我在页面顶部有一些 html，如下所示:

<div class="candidate-details">
  <p class="name">Lorem Ipsum</p>
  <p class="occupation">Lorem Ipsum Developer</p>
  <p class="email"><i class="fa fa-envelope" aria-hidden="true"></i> lorem.lololol@gmail.com</p>
  <div class="social-media">
    <a class="social-icon" href="https://github.com/" target="_blank"><i id="gitid" class="fa fa-github fa-lg" aria-hidden="true"></i></a>

    <a class="social-icon" href="https://www.linkedin.com/" target="_blank"><i id="linkedid" class="fa fa-linkedin fa-lg" aria-hidden="true"></i></a>

  </div>
</div>

在页面底部，我有一个链接:

<p id="thank-you" class="about-contents">Thanks for stopping by. <a class="touch" href="#">Get in touch :) </a>

JS代码:

  $(".touch").on("click", function(){
  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  $("html, body").animate({
          scrollTop: 0
        }, 1000);

  setTimeout(function() {
    $(".fa-envelope, .fa-github, .fa-linkedin").addClass("swing").one(animationEnd, function() {
      $(this).removeClass("swing");
    });
   }, 1500);
  });

最后是一些 CSS:

 .swing {
  -moz-transition: all 600ms cubic-bezier(0.99, 0, 0.57, 0.94);
  -o-transition: all 600ms cubic-bezier(0.99, 0, 0.57, 0.94);
  -webkit-transition: all 600ms cubic-bezier(0.99, 0, 0.57, 0.94);
  transition: all 600ms cubic-bezier(0.99, 0, 0.57, 0.94);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

完整代码:Codepen

那么我想实现吗？

我想要的是当用户点击页面底部的链接 Get in touch 时，一些平滑的滚动业务随之而来，用户被带到页面顶部，三个fontawesome 图标 360 度旋转以引起他们的注意。 我希望每次点击都会发生这种情况。

目前发生了什么？

平滑滚动每次都成功发生。旋转动画在第一次点击时成功发生，仅此而已。 它不会在每次后续点击时重复。

关于 SO on CSS animation working only once 有很多问题，但似乎没有一个对我有帮助。 This one已经很接近了，但并没有真正解决任何问题。

我想要发生什么？每次用户点击取得联系链接时，旋转动画和平滑滚动都会重复。

谢谢。

Answer 1

这是因为您使用的是动画而不是过渡。改变这个:

  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

到

var animationEnd = 'webkitTransitionEnd mozTransitionEnd MSTransitionEnd oTransitionEnd transitionend';