如何在离开页面之前为单击的链接设置动画

Question

以下是我想要实现的目标：

1. 当一个HTML链接被点击时，我想在离开页面之前为它设置动画
2. 如果链接在新窗口/选项卡中打开，则不应进行动画

我究竟是如何做到这一点的？

Answer 1

您可以使用javascript

$(function(){
  $(".btn").bind("click",function(){
    $(this).animate({'left': '100px'}, 100, function(){
    window.location.href = index.html
  })
 })
})

但是如果你的按钮是一个链接，你就必须停止默认操作。

Answer 2

您需要捕获点击事件，阻止默认操作，执行动画，然后加载新页面。

如果使用jquery（可用作jsfiddle）：

$('a').click(function (event) {
  event.preventDefault();
  $(this).animate({
    //whatever
  }, function() {
    location.href = $(this).attr("href");
  });
});

更新：这是解释注释中提到的情况的新jsfiddle，请转到那里获取更新的代码。诀窍是寻找ctrl或command的按键，如果按下任意一个键，则中止新定义的动画单击处理程序。

注意：窗口需要聚焦才能检测到按键，在jsfiddle中，这意味着帧需要聚焦才能工作。