Javascript 使用zepto，是否可以对动画进行排队？

有一个API来设置元素的动画，允许包含一个“完成”回调函数

然而，似乎没有得到支持

我想知道是否有一种内置的方法可以使用zepto创建动画序列，或者我应该从某处掐一个队列函数

---

此外，“完成”回调不传递任何参数，因此知道动画序列的哪个阶段有点难看-也许有解决办法？

只有在动画完成时才调用可以传递给zepto的anim（ate）函数的回调

我们可以假设在回调期间css属性与传入的相同。因此，如果不直接传递它们，则可以重用该对象

此外，在回调中，您始终可以使用

$.fn.css

函数获取当前样式，尽管这可能不是最有效的方法

关于排队，使用动画回调，您可以通过使用嵌套回调调用

$.fn.anim

来构建基本队列

$（'div'）。设置动画（{width:200}，1000，“线性”，函数（）{
动画（{“背景色”：“红色”}，300，“轻松”，函数（）{
变量$this=$（this），
宽度=$this.css（“宽度”）；//将为“200px”
$this.animate（{height:300}，1000，“linear”）；
});
});

如果您想要或需要更高级的队列，将jQuery队列作为插件移植到zepto应该没什么大不了的

---

干杯

我不确定你是否会觉得它有帮助，但我写了一个小插件来为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
});