📌

CSSで表示アニメーションを指定する方法

らんす🍐2021/03/12に公開

モーダル表示時などに普通にアニメーションを設定しても反映されなかったので、その対応策です。
実際の動作は、ミニマルなモーダルライブラリを npm で公開しました のデモで使用していますのでご確認ください。

表示アニメーションが効かないケース

html
<input type="checkbox" class="trigger">
<div class="modal">
  <div class="modal__container"></div>
</div>
css
.modal {
  display: none;
  /* opacity をアニメーションさせたい */
  opacity: 0;
  transition: opacity .3s ease;
}

.trigger:checked + .modal {
  /* チェックボックスがONになると表示される */
  display: block;
  /* アニメーションが効かない */
  opacity: 1;
}

表示アニメーションが効くケース

html
同上
css
.modal {
  display: none;
}

.modal .modal__container {
  /* opacity をアニメーションさせたい */
  opacity: 0;
  transition: opacity .3s ease;
}

.trigger:checked + .modal {
  /* チェックボックスがONになると表示される */
  display: block;
}

.trigger:checked + .modal .modal__container {
  /* displayプロパティを変更した要素の内側の要素であれば、 */
  /* (displayプロパティを変更した要素以外の要素であれば、) */
  /* アニメーションが効く */
  opacity: 1;
}

注意

  • 非表示は、アニメーションが実行される前に、display: none;になってしまうためアニメーションが効きません 😇
GitHubで編集を提案
株式会社ナンバーフォー

「お客様のことを心から考えたソフトウェアを」 四葉のクローバー・ナンバーフォーを見つけて頂いたお客様に幸せをお約束できるそういう会社でありたいと考え開発に取り組んでいます

Discussion

ログインするとコメントできます