I'm currently in the process of developing my custom modal implementation. Everything is working smoothly so far, but I am facing challenges when it comes to animating it.
Here is my Modal component:
import React from 'react'
import Slider from './Slider'
import {IoIosCloseCircleOutline} from "react-icons/io"
import styled from "styled-components";
export default function Modal(props) {
const Modal = styled.div `
transform: translateX(${({animateSlideInRight}) => (animateSlideInRight ? "0" : "100vw")});
transition: transform 1s;
width: 1000px;
height: 650px;
z-index: 100;
position: fixed;
background: white;
transition: all 1.1s ease-out;
box-shadow:
-2rem 2rem 2rem rgba(black, 0.2);
visibility: visible;
display: flex;
border-bottom-right-radius: 100px;
`
const closeModal = () => {
props.setShow(false)
}
const data = props.data
if (!props.show) {
return null
}
return (
<div className="modalWrapper">
<Modal className="modal" id="modal" animateSlideInRight = {props.show}>
<div className="modalHeaderWrapper">
<IoIosCloseCircleOutline className="modalCloseCross" onClick={closeModal}/>
<img src={data[0].logo} alt="logo" />
<h2>{data[0].title}</h2>
</div>
<div className="modalRightFlex">
<Slider
images={[data[0].image1Carrousel, data[0].image2Carrousel, data[0].image3Carrousel]}
/>
<div className="modalRightDescription">
<h1>Description</h1>
<p>{data[0].description}</p>
<h1>Technologies</h1>
<div className="modalTechnologiesWrapper">
{data[0].technologiesUsed.map((image) => {
return <img src={image}/>
})}
</div>
</div>
</div>
</Modal>
</div>
)
}
In my modal implementation, I use a styledComponent to determine whether to perform translation on the X-axis based on the show state. The state handling happens at the ancestor level since the modal is triggered by clicking on a separate card component.
The current CSS styling for the modal is defined within the styled div itself.
Things I've attempted:
1. Attempted using a regular div and utilizing CSS keyframes for animations - while sliding in works correctly, the closing animation does not behave as expected.
2. Tried setting an animate state and dynamically assigning classNames based on this state. Initially effective upon closing, but then encountered flickering issues.
If anyone can identify the issue here, I would greatly appreciate it. Thank you.
Edit: Sandbox link: https://codesandbox.io/s/trusting-shape-vxujw