Используя zepto, возможно ли поставить анимацию в очередь?

Question

В zepto.js есть API для анимации элементов, который позволяет включить функцию обратного вызова "done". живой источник

однако API очереди типа jquery, похоже, не поддерживается.

Мне было интересно, есть ли встроенный подход для создания анимационных последовательностей с помощью zepto или я просто должен ущипнуть функцию очереди откуда-нибудь?

Кроме того, "готовый" обратный вызов не передает никаких параметров, поэтому было бы неприятно знать, на какой стадии последовательности анимов вы находитесь - может быть, есть обходной путь для этого?

Answer 1

Я не уверен, что вы найдете это полезным, но я написал небольшой плагин для очереди анимации Zepto:

$.fn.queueAnim = function (steps, callback) {
  var $selector = this;

  function iterator(step) {
    step.push(iterate);
    $selector.animate.apply($selector, step); 
  }

  function iterate() {
    if (!steps.length) return callback && callback();

    var step = steps.shift();
    iterator(step);
  }

  iterate();
}

пример использования:

$('div').queueAnim([
  [ { 'rotate': '15deg' }, 200, 'ease-out' ],
  [ { 'rotate': '-13deg' }, 300, 'ease-out' ],
  [ { 'rotate': '10deg' }, 400, 'ease-out' ],
  [ { 'rotate': '0deg' }, 500, 'ease-out' ]
], function () {
  // all done
});

Answer 2

Обратный вызов, который вы можете передать функции anim (ate) zepto, вызывается только после завершения анимации.

Можно предположить, что во время обратного вызова свойства css такие же, как и переданные. Поэтому, если вы не передадите их напрямую, вы можете повторно использовать объект.

Кроме того, внутри обратного вызова вы всегда можете использовать $.fn.css функция, чтобы получить текущий стиль, хотя это может быть не самым эффективным способом.

Что касается очередей, с помощью обратных вызовов анимации вы можете построить элементарную очередь, вызвав $.fn.anim с вложенными обратными вызовами.

$('div').animate({width: 200}, 1000, "linear", function(){

    $(this).animate({"background-color": "red"}, 300, "ease-in", function() {
        var $this = $(this),
            width = $this.css("width"); // will be "200px"

        $this.animate({height: 300}, 1000, "linear");
    });

});

Если вы хотите или нуждаетесь в более сложных очередях, портирование очереди jQuery на zepto как плагин не должно быть большой проблемой.

ура