Web制作のアレコレ

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

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

transition

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

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

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div>
    おかしなtransition
  </div>
</body>
</html>
CSS


div{
  width: 500px;
  height: 500px;
  background-color: pink;
  border: 3px solid black;
  border-radius: 50%;
  text-align: center;
  line-height: 500px;
  transition: 5s;
  margin: auto;
}

div:hover{
  border-radius: 0;
}
読み込み時の動き

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

回避方法

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

修正後HTML


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
  $(window).on('load',function(){
    $('body').removeClass('preload');
  });
  </script>
</head>
<body class="preload">
  <div>
    おかしなtransition
  </div>
</body>
</html>
修正後CSS


.preload{
  transition:0 !important;
}
div{
  width: 500px;
  height: 500px;
  background-color: pink;
  border: 3px solid black;
  border-radius: 50%;
  text-align: center;
  line-height: 500px;
  transition: 5s;
  margin: auto;
}
div:hover{
  border-radius: 0;
}

これで安心