javascript - 如何中断 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 后，我会发布一条“就绪”消息，且不会淡入淡出。

当响应几乎是瞬时的时，就会出现问题。在这种情况下，文本将替换为“ready”，但动画会继续，淡出消息(即淡出 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 进行的样式更改也将被删除。有意义的鲁棒停止函数也应该是动画队列的一部分，以便也可以访问动画属性。