Here's the code: import ReactDOM from 'react-dom' īackground: rgba(40,91,218,0.5) /* you must use this and not opacity because opacity changes the front color */ With the answer of as my start point, I gained a better understanding of how animation works in CSS/JS and rewrote my modal entirely so it now does what I want. ReactDOM.render(, document.getElementById('root')) setVisible(true)} className="md-trigger"> setVisible(false)} className="md-overlay"/> setVisible(false)} className="md-close">close THE MODAL APPEAR ANIMATION DOES NOT WORK WHEN THIS IS UNCOMMENTED Transform: translateX(-50%) translateY(-50%) Ĭonst = useState(false) If you have suggesting for cutting it further whilst still being relevant please let me know. I've worked pretty hard to make the minimum possible example below, but it is still fairly large I apologise. My specific goal is to NOT have the modal code in the DOM prior to pressing a button to make it appear.
If anyone has any idea how to fix this it would be much appreciated. With the commented code, the modal simply appears without animation. Without the commented code, the animation works.
The example below demonstrates both cases. I don't like such a solution because it seems like a hack - I don't have any clear understanding why such a hack would work. I've spent many hours trying various ways to make this work and the best I can come up with is to use tTimeout to trigger the animation 200 milliseconds after the modal code is added to the DOM. This is the problem: if the button adds the modal code to the DOM then the modal simply appears with no animation.
This works fine, BUT only if the modal code is already in the DOM when the button is pressed. I have a modal which appears on the press of a button and is animated as it is displayed.
0 kommentar(er)
