search

ingram-projects / animxyz

The first truly composable CSS animation library. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.
https://animxyz.com
MIT License
2.41k stars 56 forks source link

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

Closed florian-lefebvre closed 3 years ago

florian-lefebvre commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

florian-lefebvre commented 3 years ago

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

ricky11 commented 2 years ago

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 commented 2 years ago

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