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

yyx990803 · yyx990803 · commit 612d32105a4b · 2016-12-08T16:54:09.000-05:00
diff --git a/src/platforms/web/runtime/directives/show.js b/src/platforms/web/runtime/directives/show.js
@@ -14,22 +14,28 @@ 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 */
     if (value === oldValue) return
     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'
diff --git a/src/platforms/web/runtime/modules/transition.js b/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)
   }
 
diff --git a/test/unit/features/transition/transition.spec.js b/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)
 

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ import {`
`11`	`11`	`whenTransitionEnds`
`12`	`12`	`} from '../transition-util'`
`13`	`13`
`14`		`-export function enter (vnode: VNodeWithData) {`
	`14`	`+export function enter (vnode: VNodeWithData, toggleDisplay: ?() => void) {`
`15`	`15`	`const el: any = vnode.elm`
`16`	`16`
`17`	`17`	`// call leave callback now`
`@@ -122,6 +122,7 @@ export function enter (vnode: VNodeWithData) {`
`122`	`122`	`}`
`123`	`123`
`124`	`124`	`if (vnode.data.show) {`
	`125`	`+ toggleDisplay && toggleDisplay()`
`125`	`126`	`enterHook && enterHook(el, cb)`
`126`	`127`	`}`
`127`	`128`