Я создал модальный компонент, который исчезает с анимацией, но я не знаю, как создать ту же (в обратном порядке) анимацию затухания при отклонении модала.
Модал отображается, когдасвязанное состояние изменяется, и затем модал отображается с его потомками:
{this.state.showModal && (
<Modal>
<p>this is the content of the modal</p>
</Modal>
)}
Анимация модала при исчезновении (CSS):
.Modal {
animation: animModal 400ms ease-in-out;
opacity: 0;
animation-fill-mode: forwards;
}
@keyframes animModal {
0% {
transform: translate(-400%, -50%);
opacity: 0;
}
100% {
transform: translate(-50%, -50%);
opacity: 1;
}
}
Но когда модалуволен, конечно, нет анимации.
Одним из решений было бы визуализировать модал всегда, но сделать его видимым только в определенных ситуациях:
const modal = (props) => (
<Auxiliery>
<div className={classes.Modal}
style={{transform: props.show ? 'translate(-50%, -50%)' : 'translate(-400%, -50%)', opacity: props.show ? '1' : '0'}}>
{props.children}
</div>
</Auxiliery>
)
И в компоненте, который показываетмодал:
<Modal show={this.state.showModal}>
<p>content of the modal</p>
</Modal>
Таким образом, модал всегда здесь и просто прячется.Но моя проблема с этим подходом состоит в том, что модал всегда визуализируется, и иногда содержимое, которое я помещаю в него, может быть большим, поэтому затрагивается весь смысл рендеринга компонентов только при необходимости.
Что бы вы сделали?
Заранее спасибо