はじめに
こんな感じの、ふわっと表示・ふわっと閉じるアニメーションを実現する方法をご紹介します。
通常のダイアログ表示
まずはスタイルを指定せず、ダイアログの表示・非表示を作成します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button
id="open-dialog-button"
type="button"
>
ダイアログを開く
</button>
<dialog id="dialog">
<p>ダイアログです</p>
<button
id="close-dialog-button"
type="button"
>
ダイアログを閉じる
</button>
</dialog>
<script>
const openDialogButtonElement = document.getElementById("open-dialog-button");
const closeDialogButtonElement = document.getElementById("close-dialog-button");
const dialogElement = document.getElementById("dialog");
openDialogButtonElement.addEventListener("click", () => {
dialogElement.showModal();
});
closeDialogButtonElement.addEventListener("click", () => {
dialogElement.close();
});
</script>
</body>
</html>
全くふわっとしていません。
ふわっと表示を実現
@starting-styleを使って、ふわっと表示させます。
@starting-styleは、要素が追加された時やdisplayがnoneからblockなどに変更された時に適用されます。
<style>
dialog {
transition: opacity 1s, translate 1s;
&[open] {
opacity: 1;
translate: 0 0;
@starting-style {
opacity: 0;
translate: 0 20px;
}
}
}
</style>
今回の場合は、ダイアログを開く前はdisplayがnoneで、開いた後はdisplayがblockに変更されるため、@starting-styleが適用され、transitionの指定により、ふわっと表示がされました。
@starting-styleを使用しなくても実現できるのでは？と思う方もいるかもしれませんが、displayがnoneからblockに切り替わる場合はtransitionが効きません。
ふわっと閉じるを実現
transition-behaviorのallow-discreteを使って、ふわっと閉じるようにします。
allow-discreteは離散プロパティに対してトランジションを適用させるものです。
overlayとdisplayは離散プロパティで、トランジションの効果を受けないため、allow-discreteを指定して、トランジションが適用されるようにしてます。
<style>
dialog {
opacity: 0;
translate: 0 20px;
transition:
opacity 1s,
translate 1s,
overlay 1s allow-discrete,
display 1s allow-discrete;
&[open] {
opacity: 1;
translate: 0 0;
@starting-style {
opacity: 0;
translate: 0 20px;
}
}
}
</style>
firefoxの137.0.2のバージョン以前では、閉じるアニメーションは対応していません。
backdropもアニメーション
backdrop（背景の黒透明）のアニメーションがまだできていません。
こちらはダイアログで指定した方法と同じように、@starting-styleを使用することで、ふわっと表示されるようになります。
<style>
dialog {
（省略）
&::backdrop {
opacity: 0;
transition: opacity 1s;
}
&[open]::backdrop {
opacity: 1;
@starting-style {
opacity: 0;
}
}
}
</style>
すべてのコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
dialog {
opacity: 0;
translate: 0 20px;
transition:
opacity 1s,
translate 1s,
overlay 1s allow-discrete,
display 1s allow-discrete;
&[open] {
opacity: 1;
translate: 0 0;
@starting-style {
opacity: 0;
translate: 0 20px;
}
}
&::backdrop {
opacity: 0;
transition: opacity 1s;
}
&[open]::backdrop {
opacity: 1;
@starting-style {
opacity: 0;
}
}
}
</style>
<button
id="open-dialog-button"
type="button"
>
ダイアログを開く
</button>
<dialog id="dialog">
<p>ダイアログです</p>
<button
id="close-dialog-button"
type="button"
>
ダイアログを閉じる
</button>
</dialog>
<script>
const openDialogButtonElement = document.getElementById("open-dialog-button");
const closeDialogButtonElement = document.getElementById("close-dialog-button");
const dialogElement = document.getElementById("dialog");
openDialogButtonElement.addEventListener("click", () => {
dialogElement.showModal();
});
closeDialogButtonElement.addEventListener("click", () => {
dialogElement.close();
});
</script>
</body>
</html>
まとめ
ダイアログのふわっと表示・ふわっと閉じる方法をご紹介しました。
モダンCSSを使うことで、JavaScript無しでもアニメーションが作れるので、皆さんも是非。
参考記事
最後に
GoQSystemでは一緒に働いてくれる仲間を募集中です！
ご興味がある方は以下リンクよりご確認ください。