使用zepto，可以排列動畫嗎？

Question

zepto.js有一個API來動畫元素，它允許包含「完成」回調函數。 animate source

但是jquery type queue API似乎不被支持。

我想知道是否有一個內置的方法來創建zepto的動畫序列，或者我應該從某處捏隊列功能？

此外，「完成」回調不會傳遞任何參數，所以它有點難以知道動畫序列的哪個階段 - 也許這是一個解決方法？

Answer 1

可以傳遞給仄的動畫回調（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隊列作爲插件移植到zepto應該沒什麼大不了的。

乾杯

Answer 2

我不知道，如果你會發現它的幫助，但我寫了一個豆蔻插件來排隊仄動畫：

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