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

[Anonymous]

Я реализую свою собственную боковую панель . Я могу заставить его скользить и не может сделать его скользящим. Fade-Out выполнено, но выдвижение не было. Я действительно понятия не имею, почему. Пожалуйста, помогите! Заранее спасибо. < /P>
Это упрощенный код TSX: < /p>
import React, {useState} from 'react';
import './AccountSideBar.css';
import LoginUtils from '../utils/LoginUtils';
import {IMAGE_PATH} from "../utils/BrowserConfig";

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

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

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

return (

e.stopPropagation()}>

×



)
;
};

export default AccountSideBar;
< /code>
Это css < /p>
.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