transition-behavior: allow-discrete; を指定すると、従来CSSではアニメーションできなかったプロパティを適切なタイミングで切り替えてくれます。
例えば opacity のアニメーションと同時に display: none → block を設定すると、
・開くとき → フェードの前に block に変更
・閉じるとき → フェードの後に none に変更
と、いい感じに切り替えてくれるようです。
まだ十分調べきれていませんが、簡単なことであれば JavaScript を使用しなくても実装できそうで良いですね！
●CSS
transition: opacity .3s, display .3s allow-discrete;
※アニメーションは以下のようなものを指定
opacity: 0; → opacity: 1;
display: none; → display: block;
