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

Question

zepto.js имеет API для анимации элементов, что позволяет включить функцию «сделанного» обратного вызова. animate source

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

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

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

Answer 1

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

Сохраняется, чтобы предположить, что во время обратного вызова свойства 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 к зепты как плагин не должен быть большим делом.

Приветствия

Answer 2

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

$.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 
});