Question

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

这是我的代码：

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

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

1 个答案: