点击button2时如何阻止animationend回调函数执行？

嘿，这个问题其实很好解决，核心是利用jQuery的事件命名空间来精准控制事件绑定的移除，避免在点击button2后触发之前绑定的animationend回调。具体实现步骤如下：

• 给button1中绑定的动画结束事件添加自定义命名空间（比如.animInCallback），这样后续可以精准定位并移除它
• 在button2的点击事件中，先移除这个带命名空间的事件绑定，再处理动画类的切换（建议移除animation-in类，避免两个动画叠加冲突）

完整代码示例 #

$('.button1').click(function () {
  $('.wrapper').addClass('animation-in');
  // 给事件绑定添加命名空间 .animInCallback，方便后续精准移除
  $('.wrapper').one('webkitAnimationEnd oanimationend msAnimationEnd animationend.animInCallback', function (e) {
    // 这里是你原本要执行的逻辑
    console.log('animation-in 动画结束，触发回调');
  });
});

$('.button2').click(function () {
  // 移除带命名空间的动画结束事件绑定，直接阻止回调触发
  $('.wrapper').off('webkitAnimationEnd oanimationend msAnimationEnd animationend.animInCallback');
  // 移除animation-in类，避免两个动画同时作用，再添加animation-out类
  $('.wrapper').removeClass('animation-in').addClass('animation-out');
});

原理说明 #

• 你原本用.one()绑定事件，它会在事件触发一次后自动解绑，但如果animation-in动画还没结束就点击了button2，这个事件绑定仍然存在，等animation-in动画结束时还是会触发回调。
• 给事件加上命名空间后，我们可以用.off()精准移除这个特定的事件绑定，不会影响.wrapper上其他可能存在的animationend事件。
• 额外移除animation-in类是个优化细节，避免两个动画类同时作用在元素上，导致动画表现不符合预期。

如果需要让animation-in动画立刻终止（而不是自然结束），还可以通过触发元素重绘来强制停止，比如在添加animation-out类后加上一行：

$('.wrapper').get(0).offsetHeight; // 触发重绘，强制终止之前的动画

这一步可选，根据你的实际动画需求来决定是否添加。

内容的提问来源于stack exchange，提问作者Alberto Soto