transition: onEnter -> enter, onLeave -> leave, onAppear -> appear (ref #3172)

Author: yyx990803

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

@@ -51,17 +51,16 @@ export function enter (vnode: VNodeWithData) {
 
   const {
     css,
-    appear,
     enterClass,
     enterActiveClass,
     appearClass,
     appearActiveClass,
     beforeEnter,
-    onEnter,
+    enter,
     afterEnter,
     enterCancelled,
     beforeAppear,
-    onAppear,
+    appear,
     afterAppear,
     appearCancelled
   } = resolveTransition(data, vnode.context)
@@ -74,7 +73,7 @@ export function enter (vnode: VNodeWithData) {
   const startClass = isAppear ? appearClass : enterClass
   const activeClass = isAppear ? appearActiveClass : enterActiveClass
   const beforeEnterHook = isAppear ? (beforeAppear || beforeEnter) : beforeEnter
-  const enterHook = isAppear ? (onAppear || onEnter) : onEnter
+  const enterHook = isAppear ? (typeof appear === 'function' ? appear : enter) : enter
   const afterEnterHook = isAppear ? (afterAppear || afterEnter) : afterEnter
   const enterCancelledHook = isAppear ? (appearCancelled || enterCancelled) : enterCancelled
 
@@ -130,14 +129,14 @@ export function leave (vnode: VNodeWithData, rm: Function) {
     leaveClass,
     leaveActiveClass,
     beforeLeave,
-    onLeave,
+    leave,
     afterLeave,
     leaveCancelled,
     delayLeave
   } = resolveTransition(data, vnode.context)
 
   const expectsCSS = css !== false
-  const userWantsControl = onLeave && onLeave.length > 2
+  const userWantsControl = leave && leave.length > 2
   const cb = el._leaveCb = once(() => {
     if (expectsCSS) {
       removeTransitionClass(el, leaveActiveClass)
@@ -172,7 +171,7 @@ export function leave (vnode: VNodeWithData, rm: Function) {
         }
       })
     }
-    onLeave && onLeave(el, vm, cb)
+    leave && leave(el, vm, cb)
     if (!expectsCSS && !userWantsControl) {
       cb()
     }

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

@@ -126,8 +126,8 @@ if (!isIE9) {
     })
 
     it('inline transition object', done => {
-      const onEnter = jasmine.createSpy('enter')
-      const onLeave = jasmine.createSpy('leave')
+      const enter = jasmine.createSpy('enter')
+      const leave = jasmine.createSpy('leave')
       const vm = new Vue({
         template: `<div><div v-if="ok" class="test" :transition="{
           name: 'inline',
@@ -139,8 +139,8 @@ if (!isIE9) {
         data: { ok: true },
         transitions: {
           inline: {
-            onEnter,
-            onLeave
+            enter,
+            leave
           }
         }
       }).$mount(el)
@@ -150,15 +150,15 @@ if (!isIE9) {
       vm.ok = false
       waitForUpdate(() => {
         expect(vm.$el.children[0].className).toBe('test bye byebye active')
-        expect(onLeave).toHaveBeenCalled()
+        expect(leave).toHaveBeenCalled()
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test byebye active')
       }).thenWaitFor(duration + 10).then(() => {
         expect(vm.$el.children.length).toBe(0)
         vm.ok = true
       }).then(() => {
         expect(vm.$el.children[0].className).toBe('test hello hello-active')
-        expect(onEnter).toHaveBeenCalled()
+        expect(enter).toHaveBeenCalled()
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test hello-active')
       }).thenWaitFor(duration + 10).then(() => {
@@ -167,8 +167,8 @@ if (!isIE9) {
     })
 
     it('transition with JavaScript hooks', done => {
-      const onLeaveSpy = jasmine.createSpy('onLeave')
-      const onEnterSpy = jasmine.createSpy('onEnter')
+      const onLeaveSpy = jasmine.createSpy('leave')
+      const onEnterSpy = jasmine.createSpy('enter')
       const beforeLeaveSpy = jasmine.createSpy('beforeLeave')
       const beforeEnterSpy = jasmine.createSpy('beforeEnter')
       const afterLeaveSpy = jasmine.createSpy('afterLeave')
@@ -184,14 +184,14 @@ if (!isIE9) {
               expect(el.className).toBe('test')
               beforeLeaveSpy(el, vm)
             },
-            onLeave: (el, vm) => onLeaveSpy(el, vm),
+            leave: (el, vm) => onLeaveSpy(el, vm),
             afterLeave: (el, vm) => afterLeaveSpy(el, vm),
             beforeEnter: (el, vm) => {
               expect(vm.$el.contains(el)).toBe(false)
               expect(el.className).toBe('test')
               beforeEnterSpy(el, vm)
             },
-            onEnter: (el, vm) => onEnterSpy(el, vm),
+            enter: (el, vm) => onEnterSpy(el, vm),
             afterEnter: (el, vm) => afterEnterSpy(el, vm)
           }
         }
@@ -234,10 +234,10 @@ if (!isIE9) {
         data: { ok: true },
         transitions: {
           test: {
-            onEnter: (el, vm, cb) => {
+            enter: (el, vm, cb) => {
               next = cb
             },
-            onLeave: (el, vm, cb) => {
+            leave: (el, vm, cb) => {
               next = cb
             }
           }
@@ -276,8 +276,8 @@ if (!isIE9) {
         transitions: {
           test: {
             css: false,
-            onEnter: enterSpy,
-            onLeave: leaveSpy
+            enter: enterSpy,
+            leave: leaveSpy
           }
         }
       }).$mount(el)
@@ -301,8 +301,8 @@ if (!isIE9) {
         data: { ok: true },
         transitions: {
           nope: {
-            onEnter: enterSpy,
-            onLeave: leaveSpy
+            enter: enterSpy,
+            leave: leaveSpy
           }
         }
       }).$mount(el)