Vue: Transition.enter not running on initial page load

[SpectreXR6]

Firstly, thank you for the great framework. I love how it is so easy to use and the documentation is excellent.

I have run in an issue where I would like a bootstrap modal to open upon session login/logout which is being shown/hidden by Vue.transition.enter/leave functions.

Upon initial page load the user session is undefined so the modal should be shown (this is not currently the case). However if I trigger the modal manually from the console $('#loginView').modal('show'); and then click login/logout, the transitions work as expected.

I believe the transition.enter function is not running on initial render.

To demonstrate this issue, I have created a jsbin. Just run $('#loginView').modal('show'); in the console.

[ayamflow]

We're having this issue as well.
The workaround we are using for now is to start with the property set to false and then set it to true in Vue.nextTick. But it's annoying... Not sure if it can work for you use case.

[yyx990803]

This is actually by design, because the enter transition is only supposed to be run when the element attached/detached state has changed. During the initial render the element is already in the DOM so there's no state change. Also imagine we have 20 items with transitions on the page, we probably don't want everything to animate on initial render.

The workaround is to explicitly trigger a state change after the initial render, basically what @ayamflow said...

[ayamflow]

It makes sense to not trigger every transition on page load, though it would be convenient to be able to set a flag on a component so the transition happens immediatly, or maybe some kind of directive to hide the Vue.nextTick + boolean thing... Might belong to userland.

[yyx990803]

Yeah, a flag attribute would probably help. Something like transition-on-init?

[cheapsteak]

transition-on-init

@yyx990803 have you looked into this any further?

react has a transitionAppear flag that does the same thing

[yyx990803]

keeping track of it as #1654, it's part of planned features for 1.1.

[PierBover]

@yyx990803 was this transition-on-init ever implemented?

[fnlctrl]

@PierBover It's in 2.0 as <transition>'s appear prop
https://github.com/vuejs/vue/issues/2873 > Transition API Change

[PierBover]

awesome @fnlctrl 👍