displayプロパティを使ったフェードイン/フェードアウトアニメーション

displayプロパティを使った表示/非表示時のアニメーションは、transitionプロパティの対象にならずフェードイン・フェードアウトができなかった。アニメーションするにはJavaScriptでOpacityを変更し、時間経過でdisplayを切り替える必要があった。

現在は、@starting-styleやtransition-behaviorを使うことで、CSSだけでフェードイン・フェードアウトのアニメーションが可能になった。

@starting-styleでフェードインの初期状態を定義し、transition-behavior: allow-discreteで要素の離散アニメーション（フェードアウト）を実現している。

なお、「離散アニメーション」とはdisplay: noneからdisplay: block（またはその逆）に切り替えるときなど、ゼロヒャクで切り替わるプロパティの間を補間するアニメーションのこと。

<button id="toggle">Show/Hide</button>

<div id="target">
  <p>...</p>
</div>

#target {
  display: none;
  opacity: 0;
  transition: opacity 1s, display 1s;
  transition-behavior: allow-discrete;

  &.show {
    display: block;
    opacity: 1;

    @starting-style {
      opacity: 0;
    }
  }
}

const item = document.querySelector('#target')
const btn = document.querySelector('#toggle')

btn.addEventListener('click', e => {
  item.classList.toggle('show')
})

デモ