使用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 
});