Topic: MDBAnimation is misbehaving in React 18

clickstudioltd priority asked 5 months ago


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>

Krzysztof Wilk staff commented 5 months 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 priority commented 5 months ago

Hey,

I'm not doing anything beyond the scope of your documentation. I think if you test the MDBAnimation component 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 5 months ago

Hi!

Thanks, we'll check that :)



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 4.0.0
  • Device: PC
  • Browser: Mozilla Firefox
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: No
Tags