The modal window opens smoothly and there are no problems with this, but when closed, it closes instantly and no animation works. What needs to be fixed/added?
Modal component:
const ModalContent = ({ children, closeModal }) => {
useEffect(() => {
const listenerHandler = (e) => {
if (e.key === 'Escape') {
closeModal()
}
}
document.addEventListener('keydown', listenerHandler)
return () => {
document.removeEventListener('keydown', listenerHandler)
}
}, [closeModal])
return children
}
export function Modal({
showModal, handleClose, children,
}) {
useEffect(() => {
showModal
? document.body.style.overflow = 'hidden'
: document.body.style.overflow = 'unset'
}, [showModal])
if (!showModal) return null
const classes = classNames({
modal: true,
hide: !showModal,
})
return createPortal(
<div className={classes} onClick={handleClose}>
<div className="modalContent" onClick={(e) => e.stopPropagation()}>
<ModalContent closeModal={handleClose}>
{children}
</ModalContent>
</div>
</div>,
document.getElementById('modal-root'),
)
}
Css style:
.modal {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 99;
background-color: rgba(0, 0, 0, .9);
display: flex;
justify-content: center;
align-items: center;
animation-name: fade;
animation-duration: .4s;
}
.modal.hide {
animation-name: fade-out;
animation-duration: .5s;
}
@keyframes fade {
from {
opacity: 0.7;
}
to {
opacity: 1;
}
}
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
The component where the modal window is used:
export function Project({
projectName, projectDescription, projectLinkToGitHub, arrayOfUsedTools, orientation,
}) {
const [currentImage, setCurrentImage] = useState(null)
const [showModal, setShowModal] = useState(false)
const imageClickHandler = (picture) => {
setCurrentImage(picture)
setShowModal(true)
}
const handleClose = () => setShowModal(false)
return (
......
<Swiper
spaceBetween={30}
centeredSlides
autoplay={{
delay: 2000,
disableOnInteraction: false,}}
pagination={{
clickable: true,}}
navigation
modules={[Autoplay, Pagination, Navigation]}
grabCursor
loop
slidesPerView={1}
className={leftStyles.swiperContainer}
>
{dogFoodImages.map((picture, i) => (
<SwiperSlide
key={i}
className={leftStyles.swiperSlide}
onClick={() => imageClickHandler(picture)}
>
<img
src={picture}
alt={picture}
className={leftStyles.screens}
/>
</SwiperSlide>
......
<Modal showModal={showModal} handleClose={handleClose}>
<img
src={currentImage}
alt=""
className={rightStyles.screensForModal}
/>
</Modal>
The bottom line is, there is a swiper with pictures, when you click on the picture, it is saved in a react state, and a modal window opens with this picture. When opening, the animation works, but when closing, nothing works, it closes instantly.
Tried to use modal window from react-overlay, CSSTransition (React Transition Group), but it didn't work out!