CSSでコンポーネントの登場および退場のanimation
方針
@animationなどで登場と退場のアニメーションをそれぞれ用意する
code:.css
/* モーダルの初期状態（画面外に配置） */
.modal {
position: fixed;
top: 0;
right: -100%; /* モーダルを画面外に配置 */
width: 300px;
height: 100%;
background-color: white;
transition: right 0.3s ease-out;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* スライドインのアニメーション */
@keyframes slideIn {
from {
right: -100%;
}
to {
right: 0;
}
}
/* モーダルが表示されるときに適用されるクラス */
.modal--open {
animation: slideIn 0.3s forwards;
}
/* スライドアウトのアニメーション */
@keyframes slideOut {
from {
right: 0;
}
to {
right: -100%;
}
}
/* モーダルが閉じるときに適用されるクラス */
.modal--close {
animation: slideOut 0.3s forwards;
}
JavaScriptなどで登場時と退場時のクラスをそれぞれ追加・削除する
code:.js
function openModal() {
const modal = document.getElementById('myModal');
modal.classList.add('modal--open');
modal.classList.remove('modal--close');
}
function closeModal() {
const modal = document.getElementById('myModal');
modal.classList.add('modal--close');
modal.classList.remove('modal--open');
}