Question

我所拥有的是页面顶部的一些html，如下所示：

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

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

  $(".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);
  });

JS代码：

 .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);
}

最后是一些CSS：

Get in touch

完整代码：Codepen

我想实现吗？

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

目前发生了什么？

平滑滚动每次都成功发生。旋转动画在第一次单击时成功发生但是就是这样。 每次后续点击都不会重复。

关于CSS动画的SO有很多问题，只有一次工作，但它们似乎都没有帮助我。 This one已经接近但并没有真正解决任何问题。

我想要发生什么？ 旋转动画除了平滑滚动外，每次用户点击def create_random_file_gen(file_path, batch_size=0, dtype=np.float32, delimiter=','): index = load_file_index(file_path) if (batch_size > len(index)) or (batch_size == 0): batch_size = len(index) lines_indices = np.random.random_integers(0, len(index), batch_size) with io.open(file_path, 'rb', buffering=0) as f: for line_index in lines_indices: f.seek(index[line_index]) line = f.readline(2048) yield __get_features_from_line(line, delimiter, dtype)链接时都会重复。

谢谢。

Answer 1

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

  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

到

var animationEnd = 'webkitTransitionEnd mozTransitionEnd MSTransitionEnd oTransitionEnd transitionend';

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

1 个答案: