v-enter never appended

[TheInsomniac]

EDIT:
The v-enter, according to what I've found online, is only applied for a split second. Just long enough to trigger the animation.

Original content:
Running v10.4..
When v-transition is enabled the v-leave is appended to the classList of the leaving element but v-enter is not applied to the newly created element.

I have tested some of the examples provided as well and notice the same 'bug'.
I've increased the transition delay to 10s so that I could watch the effect and see 'view v-leave' on the old element but only 'view' on the new element. This is obviously breaking my transitions.

I've also tried appending my own 'enterClass' and 'leaveClass' in Vue.config and notice the same behaviour.

Has anyone else experienced this or know what's going on?

Unfortunately I can not let you know if this was working with other versions of Vue as I'm new to this framework (and loving it!).

Thanks for the excellent framework!

[TheInsomniac]

So, there is actually an issue as I could never figure out why my enter and leave animations didn't fire. When using a v-view with templates that use v-repeat the animations don't fire. I was doing a simple translate3d to slide the items off the page and back in and this would end up more as a quick 'bounce' using v-repeat.

Changing the v-repeat to a full template including each individual item in the array and the events fire and the items slide off the page and new ones slide one.

So, it appears it's an issue with v-repeat in templates used along with v-transition in the v-view.
Could someone please verify?
Thanks

[TheInsomniac]

Here's a fiddle demonstrating the issue. The 'other' menu does not have v-repeat and when transitioning FROM it to others the animations fire.
The other menus are all using v-repeat and.. no animations
JSFiddle

[yyx990803]

Looks like a bug to me - I will take a closer look when I have time, if possible it'd be nice to have a minimal fiddle that better isolates the issue.

[TheInsomniac]

Yeah, i'll produce one for you. Just did a really quick copy/edit of the code that I was using to display. As a note, I re-wrote all of my 'app' using static templates (read: no v-repeat) and v-animation and v-transition both work. Before, when using v-repeat only v-animation works. For some reason the v-leave transitionend doesn't appear to be caught when using v-repeat.

BUT.. even though v-animations FIRED: when using v-repeat, the template is destroyed (well, all v-repeat'ed items) inside the container BEFORE the v-leave is added. I couldn't figure out why even my v-animations weren't working until I set an animation to 60s and noticed that it was there but drawing a blank div. Upon further inspection I noticed that the v-repeated items were deleted before the v-leave was appended basically rendering it useless anyways. Angular, ember, ractive, etc only remove the elements once the -leave event has completed. Something to note.

Besides this issue with v-repeat I love the total simplicity of vue.js and hope for continued development!

Cheers.

[yyx990803]

108122b should have fixed the underlying cause of your issue. Your example would still need some other CSS changes to work properly though.

[TheInsomniac]

Thank you, I already applied the necessary CSS fixes after posting my Fiddle. Needed an absolute position container, etc...

For some reason Browserify doesn't create a require function for me but, using the --standalone option set to Vue managed to compile a working copy of the dev branch and.. It's working thus far with v-animation and v-repeat. I'll rewrite my code as I'd prefer v-transition (I have no need of keyframes for what I'm doing) and I'll post my results!

Thank you again!

[TheInsomniac]

v-transition now also works flawlessly.. Thank you for the patch!