fix transition v-show display toggle timing for enter hooks (fix #4418)

src/platforms/web/runtime/directives/show.js

@@ -14,12 +14,16 @@ export default {
   bind (el: any, { value }: VNodeDirective, vnode: VNodeWithData) {
     vnode = locateNode(vnode)
     const transition = vnode.data && vnode.data.transition
+    const originalDisplay = el.__vOriginalDisplay =
+      el.style.display === 'none' ? '' : el.style.display
     if (value && transition && !isIE9) {
-      enter(vnode)
+      vnode.data.show = true
+      enter(vnode, () => {
+        el.style.display = originalDisplay
+      })
+    } else {
+      el.style.display = value ? originalDisplay : 'none'
     }
-    const originalDisplay = el.style.display === 'none' ? '' : el.style.display
-    el.style.display = value ? originalDisplay : 'none'
-    el.__vOriginalDisplay = originalDisplay
   },
   update (el: any, { value, oldValue }: VNodeDirective, vnode: VNodeWithData) {
     /* istanbul ignore if */
@@ -27,9 +31,11 @@ export default {
     vnode = locateNode(vnode)
     const transition = vnode.data && vnode.data.transition
     if (transition && !isIE9) {
+      vnode.data.show = true
       if (value) {
-        enter(vnode)
-        el.style.display = el.__vOriginalDisplay
+        enter(vnode, () => {
+          el.style.display = el.__vOriginalDisplay
+        })
       } else {
         leave(vnode, () => {
           el.style.display = 'none'

src/platforms/web/runtime/modules/transition.js

@@ -11,7 +11,7 @@ import {
   whenTransitionEnds
 } from '../transition-util'
 
-export function enter (vnode: VNodeWithData) {
+export function enter (vnode: VNodeWithData, toggleDisplay: ?() => void) {
   const el: any = vnode.elm
 
   // call leave callback now
@@ -122,6 +122,7 @@ export function enter (vnode: VNodeWithData) {
   }
 
   if (vnode.data.show) {
+    toggleDisplay && toggleDisplay()
     enterHook && enterHook(el, cb)
   }
 

test/unit/features/transition/transition.spec.js

@@ -279,20 +279,32 @@ if (!isIE9) {
         data: { ok: true },
         methods: {
           beforeLeave: (el) => {
+            expect(el.style.display).toBe('')
             expect(el).toBe(vm.$el.children[0])
             expect(el.className).toBe('test')
             beforeLeaveSpy(el)
           },
-          leave: (el) => onLeaveSpy(el),
-          afterLeave: (el) => afterLeaveSpy(el),
+          leave: (el) => {
+            expect(el.style.display).toBe('')
+            onLeaveSpy(el)
+          },
+          afterLeave: (el) => {
+            expect(el.style.display).toBe('none')
+            afterLeaveSpy(el)
+          },
           beforeEnter: (el) => {
             expect(el.className).toBe('test')
+            expect(el.style.display).toBe('none')
             beforeEnterSpy(el)
           },
           enter: (el) => {
+            expect(el.style.display).toBe('')
             onEnterSpy(el)
           },
-          afterEnter: (el) => afterEnterSpy(el)
+          afterEnter: (el) => {
+            expect(el.style.display).toBe('')
+            afterEnterSpy(el)
+          }
         }
       }).$mount(el)