fix id-resolved appear transition (fix vuejs#3157)

Author: yyx990803

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

@@ -42,17 +42,15 @@ export function enter (vnode: VNodeWithData) {
     el._leaveCb.cancelled = true
     el._leaveCb()
   }
+
   const data = vnode.data.transition
   if (!data) {
     return
   }
-  const isAppear = !vnode.context.$root._isMounted
-  if (isAppear && !data.appear && data.appear !== '') {
-    return
-  }
 
   const {
     css,
+    appear,
     enterClass,
     enterActiveClass,
     appearClass,
@@ -67,6 +65,11 @@ export function enter (vnode: VNodeWithData) {
     appearCancelled
   } = resolveTransition(data, vnode.context)
 
+  const isAppear = !vnode.context.$root._isMounted
+  if (isAppear && !appear && appear !== '') {
+    return
+  }
+
   const startClass = isAppear ? appearClass : enterClass
   const activeClass = isAppear ? appearActiveClass : enterActiveClass
   const beforeEnterHook = isAppear ? (beforeAppear || beforeEnter) : beforeEnter

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

@@ -426,7 +426,7 @@ if (!isIE9) {
       }).then(done)
     })
 
-    it('transition on appear', done => {
+    it('transition on appear (inline)', done => {
       const vm = new Vue({
         template: `
           <div>
@@ -452,6 +452,34 @@ if (!isIE9) {
       }).then(done)
     })
 
+    it('transition on appear (resolved)', done => {
+      const vm = new Vue({
+        template: `
+          <div>
+            <div v-if="ok"
+              class="test"
+              transition="test">foo</div>
+          </div>
+        `,
+        data: { ok: true },
+        transitions: {
+          test: {
+            appear: true,
+            appearClass: 'test-appear',
+            appearActiveClass: 'test-appear-active'
+          }
+        }
+      }).$mount(el)
+
+      waitForUpdate(() => {
+        expect(vm.$el.children[0].className).toBe('test test-appear test-appear-active')
+      }).thenWaitFor(nextFrame).then(() => {
+        expect(vm.$el.children[0].className).toBe('test test-appear-active')
+      }).thenWaitFor(duration + 10).then(() => {
+        expect(vm.$el.children[0].className).toBe('test')
+      }).then(done)
+    })
+
     it('transition on appear with v-show', done => {
       const vm = new Vue({
         template: `