如何中断 Zepto Fade

Question

我有以下 Coffeescript 代码：

# Coffeescript
setMessage = (message, options = {}) -> 
  t = statusArea.text(message)
  if options['fade']
    t.addClass('yellow')
    t.fadeOut 4000, ->
      $(this).removeClass 'yellow'

// Javascript
setMessage = function(message, options) {
  var t;
  if (options == null) options = {};
  t = statusArea.text(message);
  if (options['fade']) {
    t.addClass('yellow');
    return t.fadeOut(4000, function() {
      return $(this).removeClass('yellow');
    });
  }
};

这意味着在 LI 元素内显示状态消息。如果options['fade'] 设置为任何值，那么我调用淡入淡出的东西。在我的程序流程中发生的第一件事是我发出一个 Ajax 调用来填充一个 SELECT 并将一个带有淡入淡出（即，options['fade'] 设置为 true）的“进行远程调用”消息发布到状态区域。这可能几乎是瞬时的，也可能需要一段时间。这取决于结果的大小和网络流量。填充 SELECT 后，我会发布一条“准备就绪”的消息而不会淡出。

当响应几乎是瞬时的时，就会出现问题。在这种情况下，文本被替换为“就绪”，但动画会继续，淡出消息（即淡出 LI 元素）。

在开始另一个转换之前，是否有一种可接受的方式来终止上一个转换（如果有）？

Answer 1

我不知道您是如何实现stop() 功能的，但最可靠的方法可能是完全删除节点的cssText。

我创建了一个fiddle to demonstrate 3 implementations。前 2 个实现的问题在于，您需要知道当前正在动画的属性以及它的原始值 - 尽管您也可以通过从节点的 css 文本中删除所述属性以使用任何适用的样式来实现这一点。

要取消 Zepto 动画，这样就足够了：

$.fn.stop = function() {
    $(this).each(function() {
        $(this)
            .off("webkitTransitionEnd webkitAnimationEnd")
            .get(0).style.cssText = "";
        }
    });
    return this;
};

但是，这样做的副作用是之前使用 zepto 的样式更改也将被删除。一个有意义的健壮的停止函数也应该是动画队列的一部分，以访问动画属性。