Transitions doesn't work with leave hooks

[ozguruysal]

Version

3.0.4

Reproduction link

https://codesandbox.io/s/6jxsj?file=/src/App.vue

Steps to reproduce

Click on "Have Children" menu, it expands nicely with css transition but collapse will not transition in v3.0.4 while it works in v3.0.3.

What is expected?

Expand and collapse with transition effect.

What is actually happening?

Collapse transition is not working

---

I believe this is happening because v.3.0.4 is disabling the transition before nextFrame in this merged PR #2597. I can see in dev tools that when the height is changed to "0px", transition-property: none is applied to the element that removes transitions all together. As I commented in the reproduction code, adding a little delay with setTimeout seems to work around the problem.

[posva]

Can you check if #2716 fixed the issue?

[ozguruysal]

Thanks for quick response @posva. Not sure if there's another way but, I cloned and built Vue, and copied the new dist folder to my project's node_modules/vue folder to test. If I've done it right, I can still see the issue happening.

[yyx990803]

This is broken due to e2618a6 and #2716 does not fix it.

So I just landed cbaa380 which makes the code work but requires using @enter and @leave instead of @before-enter and @before-leave.

I know this is technically still a breaking change, but it's somewhat necessary to adhere to the intended behavior. before-leave hook should be used to put the element immediately into a state (same as *-leave-from classes), whereas leave is used to actually trigger the transition.

[ozguruysal]

Ok I've figured out how to test the development build properly after reading here.

Just tested and works perfectly now. Thanks for the quick fix!