zeptoを使用すると、アニメーションをキューに入れることは可能ですか？

Question

zepto.jsには要素をアニメートするAPIがあり、これにより「完了」コールバック関数を含めることができます。 animate source

ただし、jquery type queue APIはサポートされていないようです。

zeptoでアニメーションシーケンスを作成するための組み込みのアプローチがあるのか​​、それともどこかのキュー機能をちょうど挟む必要があるのだろうか？

また、 "done"コールバックはパラメータを渡さないので、あなたはアニメーションシーケンスのどのステージを知っているのか醜いかもしれません。

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キューをzeptoにプラグインとして移植する必要はありません。

乾杯

Answer 2

私はあなたがそれが役に立つでしょうかはわからないが、私は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 
});