Explicitly disable a transition by setting it to false (fix #9320)

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

@@ -40,6 +40,11 @@ function getRealChild (vnode: ?VNode): ?VNode {
   }
 }
 
+function activeAttr (k: string): boolean {
+  // assuming active if undefined
+  return this[camelize(k)] === undefined || this[camelize(k)] === true
+}
+
 export function extractTransitionData (comp: Component): Object {
   const data = {}
   const options: ComponentOptions = comp.$options
@@ -49,9 +54,11 @@ export function extractTransitionData (comp: Component): Object {
   }
   // events.
   // extract listeners and pass them directly to the transition methods
-  const listeners: ?Object = options._parentListeners
-  for (const key in listeners) {
-    data[camelize(key)] = listeners[key]
+  const listeners: Object = options._parentListeners || {}
+  // remove the listeners that are explicitily disabled
+  const listenerKeys: Array<string> = Object.keys(listeners).filter(activeAttr, data)
+  for (let i = 0; i < listenerKeys.length; i++) {
+    data[camelize(listenerKeys[i])] = listeners[listenerKeys[i]]
   }
   return data
 }

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

@@ -769,6 +769,30 @@ if (!isIE9) {
       }).then(done)
     })
 
+    it('appear: false', done => {
+      let next
+      const vm = new Vue({
+        template: `
+          <div>
+            <transition name="test" :appear="false" @appear="appear" >
+              <div v-if="ok" class="test">foo</div>
+            </transition>
+          </div>
+        `,
+        data: { ok: true },
+        methods: {
+          appear: (el, cb) => {
+            next = cb
+          }
+        }
+      }).$mount(el)
+
+      waitForUpdate(() => {
+        expect(vm.$el.children[0].className).toBe('test')
+        expect(next).toBeUndefined()
+      }).then(done)
+    })
+
     it('transition on SVG elements', done => {
       const vm = new Vue({
         template: `