Как прервать Zepto Fade - PullRequest
Новая
       21

Как прервать Zepto Fade

1 голос
/ 05 марта 2012

У меня есть следующий код 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).

Есть ли приемлемый способ прервать предыдущий переход, если он есть, перед началом другого?

1 Ответ

0 голосов
/ 19 июля 2012

Я не знаю, как вы реализовали функцию stop(), но наиболее надежным способом, вероятно, было бы полное удаление узла cssText.

Я создал скрипку для демонстрации3 реализации .Проблема первых двух реализаций заключается в том, что вам необходимо знать, какое свойство в настоящее время анимируется, а также его первоначальное значение - хотя вы также можете реализовать это, просто удалив упомянутое свойство из текста CSS узла, чтобы использовать тот стиль, который применяется.

Для отмены анимации Zepto должно быть достаточно чего-то подобного: 

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

Однако побочным эффектом этого будет то, что предыдущие изменения стиля с zepto также будут удалены.Значимая надежная функция остановки также должна быть частью очереди анимации, чтобы иметь доступ к анимированным свойствам.

...