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

.velocity()는 .animate()의 구문과 호환됩니다. 이것은 당신이 애니메이션의 마지막에 코드를 실행할 마지막 매개 변수로 콜백을 사용할 수 있다는 것을 의미 :

$(selector).velocity(
    { 
    /* animatable properties*/ 
    }, { 
    /* arguments */ 
    }, function(){ 
    // code to be executed upon end of animation. 
    // i.e.: another $(selector).velocity() 
}) 

가 (상대적으로 인기가) 내가 제시 한 것과 다른 구문을 사용하려면,의 arguments 섹션을 읽어 자신의 선적 서류 비치. 콜백을 complete 인수로 정의하려고합니다.

---

(자신의 웹 사이트의 현재 기능을 갖춘 예 기준) 애니메이션을 체인의 권장되는 방법은 같은 선택에 .velocity()에 후속 호출 체인입니다. 기본적으로 코드는 다음과 같이 바뀌어야합니다.

$('.dt0,.dt1,.dt2,.dt3') 
    .velocity("transition.perspectiveRightIn", {stagger: 200, drag: true }) 
    .velocity("transition.perspectiveRightOut", {stagger: 200, drag: true }) 
    .velocity("transition.perspectiveRightIn", {stagger: 200, drag: true }); 

Answer 2

콜백을 사용 하시겠습니까?

$('.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 } 
});