2023年05月16日 CSS

【自分用メモ】ページ読み込み時にCSSのtransitionが動いてしまうのを防ぐ

CSSのtransitionを使ったアニメーションを使用することは多いですが、ページ読み込み時には動いて欲しくないのに、動いてしまう不具合が発生。

その対処法のメモ。

スポンサードサーチ

発生する例

ページトップをゆっくり表示させる時のコード（SCSSのみ）。

スクロールすると、.p-pagetopに.is-activeが付与される。

.p-pagetop {
  position: fixed;
  margin-left: 1200px;
  bottom: 10vh;
  z-index: 10;
  transition: opacity 0.2s, visibility 0.2s;
  visibility: hidden;
  opacity: 0;
  cursor: pointer;

  &.is-active {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s, visibility 0.2s;
  }
}

.p-pagetopのtransition: opacity 0.2s, visibility 0.2s がページ読み込み時に動いてしまう。

これはChrome特有のバグらしい。

https://qiita.com/nagtkk/items/27ff4f2fe17746afabdd

対応策

初期 DOM 構築完了前に、外部スタイルシートを解決させる。
具体的には何かしらスクリプトを動かすだけで良い。
スクリプト実行前に、外部スタイルシートの解決を行ってくれる。

https://qiita.com/nagtkk/items/27ff4f2fe17746afabdd

上記のcssを読み込んだ直後にsctiptタグを設置するように変更すればバグは解消される。

スポンサードサーチ

終わりに

何かあれば追記する。