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

[matkovsky]

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.

[efegurkan]

Just FYI, maybe that helps,

When I tried to debug the Transition.prototype.leave it worked perfectly during debugging. But when there is no debugger attached It fails as explained on this issue.

[liuhao1025]

Try this

leave(element) {
  setTimeout(() => {
    element.style.height = 0;
  }, 10);
}

[Kingwl]

http://codepen.io/anon/pen/xgaWyN?editors=1010
try it
height should always be set

[posva]

@matkovsky Tested your codepen but it actually works. Is this still an issue? If so, can you update the repro?

I messed up with the link from @Kingwl 😆 , sorry for that. The repro wasn't working because of the CDN

[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

[jdnz]

Has something changed that means the @posva solution no longer works? I am having the same problem, but that solution does not work for me. Using setTimeout works most of the time, but sometimes the item just collapses without animation.

[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