Trying to animate two components on top of each other

web
mobile

Topic: Trying to animate two components on top of each other

aiivers pro asked 2 months ago

    <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?


Jakub Chmura staff premium commented 2 months 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


Please insert min. 20 characters.
Status

Open

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: React
  • MDB Version: 4.25.4
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No