Как я могу использовать переход в состоянии обработки CSS с помощью React? ⇐ CSS

[Anonymous]

Код: Выделить всё

У меня есть элемент div этого стиля: при нажатии кнопки x для myCartVisible устанавливается значение true, и он переходит к повторному рендерингу, показывая содержимое корзины покупок ( Контент не стал включать, так как он мне кажется ненужным, функционал работает хорошо). Мой CSS следующий:

Код: Выделить всё

.my-cart {
position: fixed;
background-color: #fff;
top: 0;
right: -100%;
z-index: 25;
padding: 24px 32px;
width: 20%;
transition: all 0.5s ease;
min-height: 100vh;
max-height: 100vh;
transform: translateX(100%);
}

.cart-active{
right: 0;
transform: translateX(0);
transition: all 0.9s;
}

Проблема в том, что переход на вход и выход не сделан, он очень грубый и некрасивый и я понятия не имею, как его анимировать, похоже, что переход все 0,9 с игнорируется ;. Может быть, кто-нибудь сможет мне помочь. Если вопрос сформулирован неправильно или вам нужна дополнительная информация, дайте мне знать.
Я пробовал CSSTransitions, но не помогло.

Подробнее здесь: https://stackoverflow.com/questions/787 ... with-react