奇妙な問題があります。これはChrome 24（AFAIK）でのみ発生するため、Chromeのバグである可能性がありますが、そうでない場合は、スクリプトを将来証明したいと考えています.
フルスクリーンの CSS3 galleryのライブラリがあります。現在、私のライブラリは巨大で、非常に複雑で、構成されている場合は CSS3 フェードアウト (デフォルトでは jQuery) などの多くの優れた機能があります。jQuery トランジションは、CSS3 トランジションと同じように (ぎこちなく) 正常に動作するようになりました。問題は、CSS3 トランジションによって読み込まれた最初の画像のみです。
過去 2 時間、問題の切り分けに費やしたところ、問題が見つかりました。問題は.removeClass('fadeout')着火が早すぎることです。なぜこれが起こるのか完全には理解できませんが、私が持っている唯一の説明は、gallery fires 時に CSS がロードされないということです.removeClass('fadeout')。ブラウザは最初に CSS をロードし、その後 jQuery のロードを開始し、jQuery の準備ができたらギャラリー ライブラリをロードし、その準備ができたら、ギャラリーを開始する関数をロードし、最初のロード手順を開始するため、完全に非現実的です。画像。
したがって、これ以上遅れないように、これが問題を引き起こすコードです。
self.backgroundDiv.css(self.transitionClass).on(self.transitionType, stopRunning).removeClass('fadeout')
説明するには -self.backgroundDiv背景画像を保持する div の jQuery コンテナーを保持します。.css(self.transitionClass)その div にトランジションを追加します。
{-moz-transition: "1000ms", -o-transition: "1000ms", -webkit-transition: "1000ms", transition: "1000ms"}
ブラウザ固有の.on(self.transitionType, stopRunning)遷移終了イベントをバインドして、最初の画像がロードされたことをライブラリに通知する関数を起動します。
だから今、彼らがwebkitTransitionEndイベントからブラウザプレフィックスを削除し、最初の画像を追加するプロセス全体を文字通り1行ずつ行っているかどうかを調べたところ、すべて正常に動作しました. それで、私に残されたのはこのフェードアウト クラスだけでした。
それが問題だったことをどうやって知ることができますか? 上記は機能しませんでしたが、これにより完全に機能しました：
window.aaa = self.backgroundDiv.css(self.transitionClass).on(self.transitionType, stopRunning);
setTimeout("window.aaa.removeClass('fadeout')", 0);
だから私の質問は - どうすれば.removeClass起動が早すぎる可能性があり、それを修正する方法がありますか (醜い setTimeout 以外)? CSSがロードされたときに確認できる方法はありますか?
ありがとう！