0

jQueryを使用してCSS3アニメーションで作成されたアニメーション/エフェクトを複製/シミュレートしようとしています。

Modernizr / Yep-Nopeを使用してCSS3アニメーションがサポートされていない場合は、フォールバックとしてjQueryバージョンを使用する予定です。

CSS3アニメーションの実行例を次に示します。https ://dl.dropbox.com/u/270523/help/fold.html

それを説明する最良の方法は、奇数クリックでのフリップインと偶数クリックでのフリップアウトです。

クリックとは、トリガー、#triggerのクリックを意味し、奇数クリックはクリック1、3、5などであり、偶数クリックは2回目、4回目、6回目などのクリックです。

現在、CSSアニメーションをクラスに適用し、トリガーをクリックするだけでクラスを切り替えることができるので、フリップインアニメーションをあるクラスに適用し、フリップアウトアニメーションを別のクラスに適用できれば、その環境で完全に機能します。設定しました。

これを行うためのすべての助けをいただければ幸いです。この複雑なアニメーションの作成方法がわかりません。必ずしも複雑である必要はありません。誰かを怖がらせたくありませんでした。これは3次元変換です。基本的に、これは私の考えではスライドやフェードよりも複雑です。

4

3 に答える 3

1

jQuery (および JavaScript) は舞台裏で CSS を使用してアニメーションを実行するため、CSS3 がクロス ブラウザーではないという理由で検討されていない場合は、jQuery にも含まれます。この効果を CSS2 と JavaScript で複製できるかどうかを尋ねている場合、CSS2 にはこれを実現するために必要な複雑さがありません。Flash やその他のプラグイン (キャンバスなど) を使用せずにこれを実行する方法として考えられる唯一の方法は、CSS3 と同じようにブラウザー間の互換性がないことです。

于 2013-03-09T04:34:39.897 に答える
1

jQuery 3D Transform プラグインの使用を試すことができます。CSS3 トランジションを使用せずに、CSS3 3D 変換プロパティをアニメーション化します。

于 2013-03-09T04:44:30.017 に答える
0

では、jquery を使用してその CSS 効果を複製したいだけですか? あなたがしなければならないのは、私があなたが望むと思うものが正しいならfadeOut、魔法を使うだけです:fadeIn

http://jsfiddle.net/dfVvp/

于 2013-03-09T04:35:06.090 に答える