Jump to content
Search Community

Animate height on enter and leave using vue composition api

r3plica test
Moderator Tag

Recommended Posts

Hey all,

I am trying to animate an element with a height.

So far I managed this:

 

https://codesandbox.io/s/awesome-nash-v2tfn3

 

But as you can see, when I press the button for a second time I would like the animation to collapse slowly and fade out.

I tried to do this:

 

https://codesandbox.io/s/silly-zhukovsky-6bngdu

 

But when I add before-leave and leave it just errors when I try to collapse the element.

Does anyone know what I am doing wrong?

  • Like 1
Link to comment
Share on other sites

You forgot to add element to your leave .fromTo.

Even if you fix that it still bombs out. I'm not a vue expert so I'm not sure how to help with that. I will say that it look like when it expands the button is supposed to change to "collapse" and it doesn't. You probably have some state management issues.

Link to comment
Share on other sites

I'm no vue expert either, actually I'm more of the total opposite. 
And your little example crashes so hard, that I even have to wait a minute before I can close my browser-tab, so it hard to even have a closer look. One thing I've seen though ist that the first error of a seemingly infinite loop of errors concerns CSS-Plugin, wich shouldn't be needed with the current GSAP Versions - although that seems unlikely to be 'the' explanation for your troubles, checking your setup could be a good idea.

Another wild (but slightly educated) guess would be, that somehow your still fire expand even when it is already open. That could cause that kind of infinite loop under certain conditions. 

Last not least it seems unnecessary at least to use fromTo() in both cases. You are keeping the state somewhere else anyhow, so to() alone should do fine and reduce complexity: If needs be you could always use set() on document DOMContentLoaded to make sure it starts closed (or opened):

Maybe that brings a little light into vue-hell :-)

  • Like 2
Link to comment
Share on other sites

Hey - just stepping back a little - it's always good to take the framework out of the equation and just focus on the functionality first.

 

Usually when you're handling animations on events it's a good idea to just toggle the direction of an animation with control methods. You can also animate between height 'auto' and 0 which may help here.

 

let tween = gsap.fromTo(element,{
 opacity: 0,
 height: 0,
},
{
 opacity: 1,
 height: 'auto',
 duration: currentDuration,
 paused:true, 
 reversed:true
});
  
// toggle open or closed
function toggle() {
 tween.reversed() ? tween.play() : tween.reverse(); 
}


Does this help a little?

Link to comment
Share on other sites

So, you can do that without any issues:

 

https://codesandbox.io/s/nostalgic-spence-ikk2nb?file=/src/App.vue

 

But this is not going to work in my application. The reason I am trying to implement the transition is because I am using it for a menu. So the individual elements are not on the dom. When they appear, then I want the animation to start, then when they disappear I want to the animation to reverse (before they are removed from the dom).

That is the purpose of the transition block.

 

Are there no vue people here that can help? I appreciate everyone's replies though!

Link to comment
Share on other sites

So I fixed it, I found someone mentioning a bug (not related) using vue. Their code example was a sidebar:

 

https://codesandbox.io/s/gsap-v3-jump-bug-in-vue-3272l?fontsize=14&file=/src/components/Sidebar.vue:498-961

 

When the bug was fixed, it fixed his issue. So I took his code and just changed it for height instead:

 

https://codesandbox.io/s/wandering-field-69kli4?file=/src/App.vue

 

I had to remove any CSS i had before and to a fromTo when enter is triggered, but at least it's not crashing.

Thanks for your help guys, I think this is the solution.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...