3

これがjsFiddleです：http：//jsfiddle.net/ybGpJ/4/

これはイライラします。ChromeとSafariでは、トランジションは問題なく実行されますが、Firefoxでは何もアニメーション化されません。何故ですか？

これは、addClass（）メソッドから発生しているようです。Firebugでコンソールを起動し、クラス.scene（cssで遷移するために使用）のオンとオフを切り替えた後、アニメーションが発生しないことがわかります。背景画像とh1の表示を切り替えているようです。

ただし、不透明度または変換（まだfirebugにある）のチェックボックスを切り替えると、うまくアニメーション化されます。

誰か助けてもらえますか？

4

1 に答える 1

4

あなたのページをFirefoxで動作させるために、次の手順を実行しました。

  1. 削除しまし.scene {overflow:hidden;}た。
  2. -moz-transition: all 1s ease-in-out;両方のクラスに追加しました：.page-titleと.animated-header-bg。
  3. 最終結果： http： //jsbin.com/amofih/1/watch

上記は私のテストではFirefoxとChromeで機能します。ここで私の変更を編集できます：http：//jsbin.com/amofih/1/edit。

私の変更は最小限で、IMOは理想的ではありませんでした。CSSの遷移と変換がたくさんあります。アニメーションを作成するためのより効率的な方法を探すことをお勧めします（おそらくJSライブラリを介して）。

また、トランジションの定義を上書きするだけで追加したことは知ってい-moz-transition: all 1s ease-in-out;ますが、それでも役立つと思いました。ここでは、少なくともFirefoxで動作することがわかります。おそらくあなたの定義に何か問題があります。参考にできる例がたくさんあるので、探し回っています。

于 2013-01-05T17:22:22.023 に答える