如何在离开页面之前为点击的链接设置动画？答案

【问题标题】：How do I animate a clicked link before leaving page?如何在离开页面之前为点击的链接设置动画？
【发布时间】：2012-03-13 07:11:31
【问题描述】：

这是我想要实现的目标：

点击 HTML 链接时，我想在离开页面之前对其进行动画处理
如果链接是在新窗口/标签页中打开的，则不应播放动画

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

【问题讨论】：

标签： javascript dom-events css-transitions

【解决方案1】：

你可以使用javascript

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

但如果您的按钮是链接，则必须停止默认操作。

【讨论】：

我不确定第二部分
没有按钮，只有链接。在链接的点击事件中播放动画并不是一个真正的选择，因为点击事件不知道我是在同一个窗口中打开链接（应该播放动画）还是在新窗口中打开链接（不应该播放动画） .
您需要在点击事件中return false或致电preventDefault。
是的，您需要阻止默认设置并将 window.location.href 设置为您要访问的链接。

【解决方案2】：

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

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

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

更新：Here's the new jsfiddle 解释了 cmets 中提到的情况，去那里获取更新的代码。诀窍是寻找 ctrl 或 command 的按键，如果任一按键被按下，则中止新定义的动画点击处理程序。

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

【讨论】：

感谢您的回复，但我认为这不满足要求 2。如果用户打开链接的上下文菜单并选择“在新窗口中打开”，则链接将在新窗口中打开而不播放动画，这是应该的。但如果用户按住 CRTL/CMD 并单击链接，您建议的方法将播放动画并在同一窗口中打开链接。
我更新了jsfiddle，它应该可以处理你现在提到的情况。我在 Mac 上，所以我无法测试“ctrl”，但它应该可以工作（它适用于 Command）。