-1

I have a scenario where I have one visible div and when user wants, this div disappears and a new one has to be displayed. All of this has to be done along with angular animations, like this carousel slides its different slides.

I have created an example to show you what I've reached, but the animation is not working as I want:

Angular slide in out example.

The problem is that when the next visible element appears, the one which has to be removed is moved to a line below.

The desired effect is similar to what happens now, but with the leaving and entering elements displayed in the same row.

I've tried many things as, for instance, to set the .container element as no wrapable with flex-wrap: nowrap;. That makes both elements displayed inline but, the one which is being removed does a weird movement to the right before it slides out to the left:

Example with elements inline and weird effect.

I think I'm close to find the solution but this has taken more time than I expected and I feel a little blocked.

christiansr85
  • 867
  • 19
  • 40

1 Answers1

0

I think I've found a simpler approach than implementing the tabs component animation, that is quite complex for the use I wanted.

Here is the example running as intended.

Basically, the idea was to set position: relative; to elements container and position: absolute; for each slidable item. This keeps the position of the leaving item where it should be and animates it properly.

christiansr85
  • 867
  • 19
  • 40