2022.11.28

ページ読み込み時にtransitionが動作してしまう場合の対処

cssでtransitinを設定していると、ページ読み込み時に動作してしまいページの表示が一瞬崩れてみえたりする場合があります。

そんな時に簡単に対処する方法をご紹介。

早速ですが、以下内容を</body>の直前にでも記述してください。

これだけで完成です。

<style>
body:not(.mmh-load) *{
  transition: none!important;
}
</style>
<script>
  document.addEventListener('DOMContentLoaded',function(){
    document.body.classList.add('mmh-load');
  });
</script>

<style>

body:not(.mmh-load) *{

transition: none!important;

}

</style>

document.addEventListener('DOMContentLoaded',function(){

document.body.classList.add('mmh-load');

});

</script>

内容を解説すると。

cssでtransitionを無効化し、dom要素を読み込み後にbody要素にクラスを付与してtransitionの無効化を解除しています。

注意点は!importantを利用してtransitionを設定すると上記のものでは無効化できない場合がほとんどだと思いますので気をつけましょう。

JavaScript