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。前两个实现的问题是你需要知道当前动画的属性以及它的原始值 - 尽管你也可以通过从节点的css文本中删除所述属性来实现它，以使用适用的任何样式。

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

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

然而，这样做的副作用是，以前的样式随zepto的变化也会被删除。有意义的强大停止函数也应该是动画队列的一部分，以便也可以访问动画属性。

如何中断Zepto淡出

1 个答案: