Velocity.js：在第一组完成后为第二组对象设置动画

Question

我正在尝试为一系列 SVG 对象制作动画。这是基本目标：第一组 4 个对象动画进入，然后退出，然后下一组对象动画进入。虽然前 2 个队列很好，但我不确定获得第二组的最佳方法等到第一组完成。

这是我的代码：

JS：

$( document ).ready(function() {
        $('.dt0,.dt1,.dt2,.dt3').velocity("transition.perspectiveRightIn", {stagger: 200, drag: true });
        $('.dt0,.dt1,.dt2,.dt3').velocity("transition.perspectiveRightOut", {stagger: 200, drag: true });
        $('.tr0,.tr1,.tr2,.tr3').velocity("transition.perspectiveRightIn", {stagger: 200, drag: true });
        })

更新：这是我的解决方案，但我对使用延迟而不是排队方法感到困扰。

$( document ).ready(function() {
        $('.dt0,.dt1,.dt2,.dt3').velocity("transition.expandIn", {stagger: 200, drag: true });
        $('.dt0,.dt1,.dt2,.dt3').velocity("transition.expandOut", {stagger: 200, drag: true, delay: 1000 });
        $('.tr0,.tr1,.tr2,.tr3').velocity({opacity: 0}, {duration:0 });
        $('.tr0,.tr1,.tr2,.tr3').velocity("transition.expandIn", {stagger: 200, drag: true, delay: 3000 });
        })

Answer 1

使用回调？

$('.dt0').velocity({
  opacity: 0 //or animation name
 }, {
 complete: function(elements) { 
  $('.dt1').velocity({
    opacity: 0 //or animation name
   }, {
   complete: function(elements) { 
    //... the others
   },{duration:200, delay:2000 } //2s delay
   });
 },{duration:1000 }
});