一連のSVGオブジェクトをアニメーション化しようとしています。基本的な目標は次のとおりです。最初の4つのオブジェクトがアニメートされ、次にアウトされ、オブジェクトの次のセットがアニメーション化されます。最初の2つのキューはうまくいきますが、2番目のセットを取得する最良の方法はわかりません最初のセットが終了するまで待つ。Velocity.js:最初のセットが終了した後の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 });
})
UPDATE:ここに私の解決策だが、私は遅延なく、キューイング方式を利用して気にしています
は、ここに私のコードです。
$(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 });
})