Topic: Trying to animate two components on top of each other
<div> <MDBAnimation type="slideOutLeft"> <Component1 /> </MDBAnimation> <MDBAnimation type="slideInRight"> <Component2 /> </MDBAnimation> </div>
I want the above code to have component 2 take the position of component 1 after the animation (e.g. component1 is in the center of the screen, slides off screen to the left then is replaced by component2 in the center)
What I get with this code is component 1 in the center of the screen, then component two coming in below it's position. I've tried using absolute positioning and z-indexing however this messes with the animation.
Is there a simple way to make this work?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Open
Specification of the issue
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.25.4
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Related topics
Jakub Chmura staff premium commented 5 years ago
Hi @aiivers,
To be honest, it's hard to understand what you want to achieve. Do you want to achieve something like a carousel ?
If yes you need to delete component 1 after animation or try to use flexbox.
Please give me more details about your expected behavior because I can't help you based on this information.
Best, Kuba