dialogを使ったポップアップを実装するとき、開く時のアニメーションはなんとかなっても、閉じる時だけうまくいかないことが何度かありました。フェードアウトもスライドアウトも、dialogが画面から消えるタイミングと競合して、アニメーションが完走しない。毎回なんとなく誤魔化してました。
今朝、CodeGridのdialog要素の記事を読んでいたら、transition: overlay と transition-behavior: allow-discrete の組み合わせで安定させる方法が書いてありました。display や overlay の変化もトランジションの対象にできるようにするプロパティで、これを指定することで閉じる方向のアニメーションも完走するようになる。@starting-style でopen直後の初期状態を定義することで、開く・閉じる両方向がセットで制御できます。
プロパティ名は覚えられる気がしないので、ボイラープレートに書いておく用途になりそうです。
closedby 属性というのも知りませんでした。<dialog closedby="any"> と書くだけで、backdropクリックやEscapeキーでdialogが閉じるようになる。今まではJavaScriptでclickイベントを拾ってその座標がdialogの外かどうかを判定する……みたいな処理を書いていたので、これは汎用性が上がりそうです。
読んだその日の夕方、ちょうど実務でdialogを使ったポップアップを実装する機会があったので、試してみました。開く・閉じるのアニメーションがどちらも動いた。うん、安定している……気がします。
