Анимация боковой планки вообще не выполняется ⇐ Html

[Anonymous]

Я реализую свою собственную боковую панель . Я могу заставить его скользить, но не смог заставить его скользить. Fade-Out выполнено, но выдвижение не было. Я действительно понятия не имею, почему. Пожалуйста, помогите! Заранее спасибо.import React, {useState} from 'react';
import './AccountSideBar.css';

interface AccountSideBarProps {
onClose: () => void;
}

const AccountSideBar: React.FC = ({ onClose }) => {
const [isClosing, setIsClosing] = useState(false);

const handleClose = () => {
setIsClosing(true);
setTimeout(onClose, 300);
};

return (

e.stopPropagation()}>

×



)
;
};

export default AccountSideBar;

Это accountsidebar.css :
.sidebar-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
display: flex;
justify-content: flex-end;
animation: fadeIn 0.3s ease-in-out;
}

.fade-out {
animation: fadeOut 0.3s forwards;
}

.slide-out {
animation: slideOut 0.3s forwards;
}

@keyframes fadeIn {
from {
background-color: rgba(0, 0, 0, 0);
}
to {
background-color: rgba(0, 0, 0, 0.5);
}
}

@keyframes fadeOut {
from {
background-color: rgba(0, 0, 0, 0.5);
}
to {
background-color: rgba(0, 0, 0, 0);
}
}

@keyframes slideIn {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}

@keyframes slideOut {
from {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}
.account-sidebar {
width: 300px;
height: 100%;
color: #fff;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
padding: 20px;
animation: slideIn 0.3s ease-in-out;
}

.account-sidebar .close-button {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
color: #fff;
font-size: 36px;
cursor: pointer;
}


Подробнее здесь: https://stackoverflow.com/questions/794 ... ute-at-all