Topic: MDBAnimation is misbehaving in React 18
Recently I have switched to React 18 and since I've changed my root render command to the new one createRoot(root).render(<App />), wherever I have MDBAnimation components with fade effect, all the child elements of MDBAnimation are being rendered with full opacity at first and then they start to fade in, which results in a broken fade effect.
If I switch to the old render style with React 17 render(<App />, root), everything works as expected. I assume this has something to do with React 18's async render feature which is being introduced in this version.
<MDBAnimation animation="fade-in" start="onLoad" duration={300}>
<div>Test</div>
</MDBAnimation>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Pro
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 4.0.0
- Device: PC
- Browser: Mozilla Firefox
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Krzysztof Wilk staff commented 2 years ago
Hi!
Thanks for reporting that, we'll check it as soon as possible. Do you have any examples we can refer to? Or does it break the examples from our documentation too?
clickstudioltd pro premium priority commented 2 years ago
Hey,
I'm not doing anything beyond the scope of your documentation. I think if you test the
MDBAnimationcomponent while it contains child elements with React 18 and the new render command, you might be able to reproduce it.I'll put a copy of my own code in the question with all the parameters that I use.
Krzysztof Wilk staff commented 2 years ago
Hi!
Thanks, we'll check that :)