在setTimeOut中使用addClass实现的on - click动画只在incewhat中发生

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> [e-mail]</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时，一些平滑的滚动业务随之而来，用户被带到页面顶部，三个漂亮的图标旋转360度吸引他们的注意力。我希望这发生在每次点击

当前正在发生什么?

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

有很多关于CSS动画只工作一次的问题，但没有一个似乎对我有帮助。这个方法很接近，但没有真正解决任何问题。

我想要发生什么?旋转动画除了平滑滚动重复每次用户点击Get in touch链接。

谢谢。

Answer 1

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

  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

var animationEnd = 'webkitTransitionEnd mozTransitionEnd MSTransitionEnd oTransitionEnd transitionend';