transition-behavior

概要

従来、display や visibility などの離散的（discrete）プロパティにはトランジションを適用できなかった。transition-behavior: allow-discrete を指定すると、これらのプロパティの変化にもトランジションが効くようになる。@starting-style と組み合わせることで、要素の表示・非表示にスムーズなアニメーションを実現する。

対応ブラウザ

基本構文

.popover {
  transition: opacity 0.3s ease,
              display 0.3s ease allow-discrete;
  opacity: 1;
}

.popover:not(:popover-open) {
  opacity: 0;
}

@starting-style {
  .popover:popover-open {
    opacity: 0;
  }
}

実務での使いどころ

• Popover のアニメーション

  Popover API で表示されるポップオーバーに、displayの遷移を含むスムーズなアニメーションを適用する。

注意点

アクセシビリティ

• 表示・非表示のアニメーションは prefers-reduced-motion に対応し、即座に切り替わるようにする。

参考リンク

• MDN Web Docs — transition-behavior
• Can I use — transition-behavior