0

javascript や jquery を使用して、次の部分にスキップしたり、css アニメーションの最後の部分に移動したりできるかどうか疑問に思っていました。以下があるとしましょう：

@keyframe effect{
    0%{opacity:1;}
    45%{opacity:1;}
    50%{opacity:0;}
    95%{opacity:0;}
    100%{opacity:1;}
}

それは何かをフェードアウトしてから戻ってきます

だから私はいくつかのボタンを作ったとしましょう。次のようにするにはどうすればよいですか。

$('#next').click(function(){
    //skip to the next animation part
});
$('#previous').click(function(){
    //skip to the previous animation part
});
4

2 に答える 2

0

animation-play-state プロパティを使用すると、アニメーションを一時停止し、変換を更新してから再開できます。

element.style.webkitAnimationPlayState = "paused";
element.style.webkitAnimationPlayState = "running";

ただし、アニメーションを一時停止したり、変形したり、再開したりして、新しい変形状態から流動的に実行することを期待することはできません。

現時点では、CSS キーフレーム アニメーションの正確な現在の「完了率」を取得する方法はありません。これを近似する最良の方法は、setInterval または requestAnimationFrame を使用することです。

このCSS トリックの記事では、これについて詳しく説明し、setInterval の使用例を示します。別のオプションは、リクエストアニメーションフレームを使用することです

前述のように、GreenSock または Velocity は、非常に高速でスムーズなアニメーションを可能にするアニメーション ライブラリです。

于 2014-10-15T11:45:08.607 に答える