`leave` transition doesn't work if the element is shown by default

Vue.js version

1.0.26

Reproduction Link

http://codepen.io/matkovsky/pen/EgYRyV?editors=1010

Steps to reproduce

1. Create a custom transition.
2. Add it to an element that has v-show set to true by default.
3. Toggle the value of v-show (by toggling the corresponding data in the model, of course).

What is Expected?

It should animate.

What is actually happening?

The first leave is not animated. It looks like the v-leave ([transitionName]-leave) class is missing the first time.

[posva]

After checking it again, this is not a bug. The element has not been rerendered the first time when you set the height on the beforeLeave hook, and therefore the CSS transition triggers as if the height is still 0.

You need to ensure the height is always set and used before setting the height to 0. You should use requestAnimationFrame in the leave hook to make it work properly (the same way you should do it in the leave hook:

leave(element) {
  requestAnimationFrame(() => {
    element.style.height = 0
  })
}

It also works with the solution @liuhao1025 proposed, but using requestAnimationFrame is a more reliable solution

[posva]

Hey, this is a Vue 1 issue. Implementing the CSS collapsing transition is sometimes tricky and varies depending on browsers. There are nice articles out there to implement this like: https://markus.oberlehner.net/blog/transition-to-height-auto-with-vue/

I’m locking this thread as it is outdated