jquery のanimateなどで簡単な動きならつけれるのですが、
例えばページ読み込み時のアニメーションで、
- オブジェクトがフェードインする
とする場合、
- CSSではオブジェクトの透明度を変えず、正しいレイアウト配置で組む
- Jqueryを読み込んだらすぐJSで各オブジェクトを透明に変更
- その後フェードインなどのアニメーション
としてモダンブラウザなどはだいたいOKなのですが、
IE8とかページ読み込み時に一瞬オブジェクトが出てしまったりします。
古いIEにアニメーションさせるなというのはごもっともですが、
何か工夫されてる方はおられますか？
初期の読み込み時点ではCSSでオブジェクトを画面外にすっとばしておいて、
JSが読まれた時点で、animateでopacity:0 + 正位置に配置修正、
その後は任意のタイミングでフェードイン
とかそんな無理矢理な感じなら何とかできないでもないのですが、
もうちょっとスマートなやり方がないものか探しております。
そんな物を紹介しているサイトなどでも良いので、
もしありましたらお願いします m(_ _)m
みんなの回答 5 件
スタイルシートでvisibility: hiddenにしておいて、JSが読まれた時点でanimateでなくcssでopacity:0+visibility: visible
とかやっています。
<!--[if lt IE 8]> とかでIE8以下だけでオブジェクトを消しておくCSSを読み込ませる、とか。JS動かなければ見えなくなるけど、CSSは効かしてJSは切ってる、っていう人いるかな。いたとしてもフォローしないな俺ならば。
あぁ、そこまでやるなら、普通のcssにdisplaynone:なりしておいて、
<noscript><display:blockにしたcss></noscropt>
とすればいいと思うよ。
ラグが生じるのは、ドキュメントが読み込まれた後に処理されるからであって古いIEだろうとモダンブラウザだろうと同じことですよ。
ですからモダンブラウザでもCPU性能が低ければ、読み込み後のCSS描画・DOM操作ラグで同様のことが起こりえますし、CSSで予め領域外に飛ばすか非表示にするかにしないと根本的な解決にはならないです。
アニメーションとは直接関係ないけど、htmlやbodyなどにclass="js"などとして、javascriptが有効な場合は、jsクラスをremoveするなんて使い方をすると、jsが有効な場合と無効の場合のcssの共同を分けられるね。
関連するトピックス