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

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

CSS2019.02.15

この記事の目次

transition
回避方法
追記

transition

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

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

<!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>

1

2

3

4

5

6

7

8

9

10

11

12

13

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<div>

おかしなtransition

</div>

</body>

</html>

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;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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にしておきました

<!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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19