1

我有以下 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 元素淡出）。

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

4

1 回答 1

0

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

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

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

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

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

于 2012-07-19T09:33:58.310 回答