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

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

4 голосов
/ 22 января 2012

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

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

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

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

Ответы [ 2 ]

2 голосов
/ 22 июня 2013

Я не уверен, что вы найдете это полезным, но я написал небольшой плагин для очереди анимации 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
});
1 голос
/ 06 июня 2012

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

Приветствия

...