Issue with mode="out-in"

[ricky11]

Using vue3@latest with latest animxyz

I am having trouble with the mode="out-in"

Currently when transition between elements, the next element will briefly transition in underneath (block level) while the previous element is being removed.

Here is what I have.

<XyzTransitionGroup  xyz="right-75% out-left-75%" mode="out-in">

SHOW THIS

SHOW THIS

SHOW THIS

SHOW THIS

i would assume that with mode out-in, the element going out will be completely removed from the page before the new element comes in,, however they seem to be doing this simultaneously , with the new element underneath the first one, and then jerking upwards, when the first element is being removed. removing the mode, does not seem to have any effect, so it makes me think the mode="out-in" isn't being applied here? any suggestions?

[mattaningram]

Hey Ricky, sorry for the delayed reply.

The mode property only applies to the XyzTransition component, not the XyzTransitionGroup component. Are you animating multiple elements or just swapping one element for another? If just swapping one for the other you can use the XyzTransition component instead and then use mode="out-in".

Check out the Switch example in this docs section: https://animxyz.com/docs#vue-xyz-transition

Lemme know if that helps!