Weblasts

Chromeでページ読み込み時にtransitionが効いてしまう件

この記事の目次

transition

このプロパティは時間的変化を指定するプロパティなのですが基本的にhoverだったりをさせた時にふわっと変えたりするときに使うと思います。
なのでhoverしたときにだけ効果を発揮してほしいものなのですが、Chromeでページを読み込んだときにこの効果が出てしまうことがあります。

※ 再現できたので参考にコードと動きを用意してあります

読み込み時の動き

そんな時にはtransitionプロパティを乱暴にhoverのところに入れると治りますが、 ほかのブラウザでは不具合が出ます。
諦めたらそこで試合終了なので、jQueryを使ってこの状態を回避していきます

回避方法

あらかじめページ全体のtransitionを無効にするためのclass属性をbody要素につけ、CSSでtransitionを無効にしておく。
画面の読み込みが完了したらjQueryを使ってtransitionを無効にするためのclass属性を外す
上記二つの処理をしていきましょう
transitionを無効にするためのclass属はpreloadにしておきました

これで安心

追記

link の後に何かしら中身のある script を置く、ということが回避策になるようだ。

という内容の記事が有名サイトで紹介されていました
こちらのほうが簡単そうなのでリンクを紹介しておきます