react-responsive-modal
react-responsive-modal copied to clipboard
Custom animations on react-responsive-modal-modal
Bug report
Describe the bug
If you want to have a custom animation on your modal window, such as a shake for incorrect password entry, you cannot because the fade in and out styles are added to the element with JS.
To Reproduce
Some code like this shows the problem (codesandbox).
const [classList, setClassList] = useState([]);
<Modal classNames={{ modal: classList }} open={open} onClose={()=>{}}>
<button onClick={() => {
setClassList(array => [...array, "custom-animation"])
}}>
Shake it
</button>
</Modal>
.custom-animation {
animation: shakeit 500ms linear;
}
@keyframes shakeit {
8%,
41% {
transform: translateX(-10px);
}
25%,
58% {
transform: translateX(10px);
}
75% {
transform: translateX(-5px);
}
92% {
transform: translateX(5px);
}
0%,
100% {
transform: translateX(0);
}
}
Expected behaviour
When the fade animation finished the style should be removed from the element
Screenshots
N/A
System information
N/A
Additional context
There is a work around I use at the moment but it would be nicer if the component handled it (codesandbox).
const onFinishFade = () => {
const { current } = modalBox;
current.style.animation = null;
};