-
ID:fSJqEm さんの質問

jquery のanimateなどで簡単な動きならつけれるのですが、
例えばページ読み込み時のアニメーションで、

  • オブジェクトがフェードインする

とする場合、

  • CSSではオブジェクトの透明度を変えず、正しいレイアウト配置で組む
  • Jqueryを読み込んだらすぐJSで各オブジェクトを透明に変更
  • その後フェードインなどのアニメーション

としてモダンブラウザなどはだいたいOKなのですが、
IE8とかページ読み込み時に一瞬オブジェクトが出てしまったりします。

古いIEにアニメーションさせるなというのはごもっともですが、
何か工夫されてる方はおられますか?

初期の読み込み時点ではCSSでオブジェクトを画面外にすっとばしておいて、
JSが読まれた時点で、animateでopacity:0 + 正位置に配置修正、
その後は任意のタイミングでフェードイン

とかそんな無理矢理な感じなら何とかできないでもないのですが、
もうちょっとスマートなやり方がないものか探しております。

そんな物を紹介しているサイトなどでも良いので、
もしありましたらお願いします m(_ _)m

みんなの回答 5 件

ID:gE66sO さんの回答

スタイルシートでvisibility: hiddenにしておいて、JSが読まれた時点でanimateでなくcssでopacity:0+visibility: visible
とかやっています。

ID:fSJqEm

ありがとうございます。visibilityもやってみます。
やっぱりCSSファイルでも非表示にしておく感じですよね。

CSSでは表示の状態にしておく、要するにJSをカットしたら動きがなくなるだけでオブジェクトは正しく表示されるという状況にできるといいんだけどなぁ、、と模索中です。

ID:0ZyvLa さんの回答

<!--[if lt IE 8]> とかでIE8以下だけでオブジェクトを消しておくCSSを読み込ませる、とか。JS動かなければ見えなくなるけど、CSSは効かしてJSは切ってる、っていう人いるかな。いたとしてもフォローしないな俺ならば。

ID:fSJqEm

そうですね、こちらもJS切ってる人は想定してないですね。
JSは切るというか、例えば動きが異なる複数のJS作って、ブラウザごととか特定条件ごとにJS出し分けたら動きが全然違うとかできたり、もちろんJSうざいってユーザー向けには動き用のJSだけ外せば普通に見せるってこともできる、みたいな、汎用的な感じができるかなと。
アニメさせる指示がJS簡潔だと管理もしやすいんじゃないかなと思いまして。

ID:UoOIXI さんの回答

あぁ、そこまでやるなら、普通のcssにdisplaynone:なりしておいて、
<noscript><display:blockにしたcss></noscropt>
とすればいいと思うよ。

ID:fSJqEm

なるほど、display:noneだけ指定したCSSを先に読ませてしまって、その後に通常の正レイアウトのCSS読ませればいいわけですね。
これいいかもですね、大変参考になりました。

ID:24gwYI さんの回答

ラグが生じるのは、ドキュメントが読み込まれた後に処理されるからであって古いIEだろうとモダンブラウザだろうと同じことですよ。
ですからモダンブラウザでもCPU性能が低ければ、読み込み後のCSS描画・DOM操作ラグで同様のことが起こりえますし、CSSで予め領域外に飛ばすか非表示にするかにしないと根本的な解決にはならないです。

ID:fSJqEm

そうですよね、jquery読んでJSの指示読むまでオブジェクト消えないっていうとやっぱラグはありますよね。
すっとばしとか消す方向で考えたいと思います!

ID:lS5tUF さんの回答

アニメーションとは直接関係ないけど、htmlやbodyなどにclass="js"などとして、javascriptが有効な場合は、jsクラスをremoveするなんて使い方をすると、jsが有効な場合と無効の場合のcssの共同を分けられるね。

ID:fSJqEm

確かにこれも考えてなかったですが、面白そうですね。
前に出ている<noscript>の案と同様、JSの生存で判断することができますが、removeのやり方だとタイミングやクラス名の幅の広さなど汎用性が広がりそうですね。
こちらも大変参考になりました!

最終更新日:2014-01-31 (5,253 views)

関連するトピックス

ページ上部に戻る