Maintain the height of an element when it is out with Vue

[florian-lefebvre]

Hello, I use AnimXYZ in my Vue project. I made a component to trigger the animation when scrolling using the Intersection Observer API but my problem is that AnimXYZ reduces the element where I have v-if="show" when it's false. Is it possible to keep the height of the original element and the animation ?

[mattaningram]

You can have the intersection observer apply the xyz-in or xyz-appear class to the elements you want to animate instead of using v-if or v-show logic. Let me know if that works.

[florian-lefebvre]

Yes, I just replaced v-if="show" by :class="show ? 'xyz-in' : 'xyz-out'" and it worked. Thanks!

[florian-lefebvre]

This is now useless, use appear-visible attribute. See https://animxyz.com/docs#vue-xyz-transition.

[ricky11]

is this such a thing as disappear? i know there isn't as vue doesn't have it, but i would like to animate out when the intersection observer detects when the div is almost out of view (i am using vue)

[florian-lefebvre]

@ricky11 I think you should look at appear-visible properties: https://animxyz.com/docs#vue-xyz-transition, and in particular the IntersectionObserverOptions.