2016-04-23 11 views
0

要素のスケールと回転をアニメーションしようとしていますが、回転アニメーションが終了する前にスケールアニメーションが終了しています。 divは約300ms後にスケールアニメーションが実行されている間、回転し続けます。 別のプロパティの期間を指定できる構文が見つかりませんでした(指定されたすべてのプロパティの期間が必要だと思いました)。 ここでは、コード、任意のヒントは感謝です:アニメーションの2つのプロパティが異なると、velocity.jsの持続時間が異なる

$('#el').velocity({ 
    rotateZ:[ 1440, 'easeInOut', 0 ], 
    scale:[ 1, 'spring', 0 ] 
},{ 
    duration:1000 
}); 

答えて

0

技術的には、アニメーションが300msの時に終わらない、それだけで春の緩和は、それがのように見えるのです。スプリングイージング機能は、アニメーションの2番目の部分ではあまり動きません。以下のように、いくつかの他のパラメータと緩和春お試しください:

$('#el').velocity({ 
    rotateZ:[ 360, 'easeInOut', 0.001 ], 
    scale:[ 1, [20,0.2], 0.001 ] 
},{ 
    duration:1000 
}); 

はまた、その速度は、未定義のパラメータとして0の値を扱うように思わ注意ので、私が代わりに0.001を使用しています。 (後続のアニメーションにのみ違いがあります)

+0

ああ、春のイージングは​​時間をあまり気にしないようです。私は、スケールのイージングを簡単に変更しました.InOutも同様です。ありがとう! – Darklight

関連する問題