Transition js hooks not working on IE9 when using v-show

[mciesin]

Version

2.2.6

Reproduction link

https://jsbin.com/xuwivezeqi/edit?html,js,console,output

Steps to reproduce

1. Surround an element with a transition component which uses js hooks.
2. Use a v-show directive on the element.
3. Toggle the visibility of the element using data passed to the v-show directive.

What is expected?

Appropriate hooks should be fired.

What is actually happening?

When using v-show, hooks are not fired on IE9.

[zxc0328]

CSS transition is not supported by IE9. So the hooks are not fired. You can checkout the source code here https://github.com/vuejs/vue/blob/dev/src/platforms/web/runtime/directives/show.js#L34

Maybe it should be pointed out in Vue's Transition Effects documentaion. Or add a warnning in dev mode when using hooks in IE9.

[mciesin]

So now we have an inconsistency with Transitions in IE9, because hooks were fired when I used v-if instead :)

[posva]

It shouldn't matter though because these hooks are meant for animations purposes. You can, and should, move other logic to other hooks like created and beforeDestroy

[mciesin]

As @zxc0328 noticed, it would be nice to point out in Vue's documentation that Vue's Transitions (not only browser-dependant CSS transitions) are not supported in IE9 . I've tried to use these js hooks only for animation purposes (I wanted to animate elements using js instead of transitions because CSS transitions are not supported in IE9) ;)

[smyth64]