support explicit transition type

Author: yyx990803

src/core/vdom/create-component.js

@@ -90,15 +90,21 @@ export function createComponent (
     )
   }
 
-  // merge component management hooks onto the placeholder node
-  mergeHooks(data)
-
   // extract listeners, since these needs to be treated as
   // child component listeners instead of DOM listeners
   const listeners = data.on
   // replace with listeners with .native modifier
   data.on = data.nativeOn
 
+  if (Ctor.options.abstract) {
+    // abstract components do not keep anything
+    // other than props & listeners
+    data = {}
+  }
+
+  // merge component management hooks onto the placeholder node
+  mergeHooks(data)
+
   // return a placeholder vnode
   const name = Ctor.options.name || tag
   const vnode = new VNode(

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

@@ -12,6 +12,7 @@ export const transitionProps = {
   appear: Boolean,
   css: Boolean,
   mode: String,
+  type: String,
   enterClass: String,
   leaveClass: String,
   enterActiveClass: String,

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

@@ -32,6 +32,7 @@ export function enter (vnode: VNodeWithData) {
 
   const {
     css,
+    type,
     enterClass,
     enterActiveClass,
     appearClass,
@@ -99,7 +100,7 @@ export function enter (vnode: VNodeWithData) {
     nextFrame(() => {
       removeTransitionClass(el, startClass)
       if (!cb.cancelled && !userWantsControl) {
-        whenTransitionEnds(el, cb)
+        whenTransitionEnds(el, type, cb)
       }
     })
   }
@@ -130,6 +131,7 @@ export function leave (vnode: VNodeWithData, rm: Function) {
 
   const {
     css,
+    type,
     leaveClass,
     leaveActiveClass,
     beforeLeave,
@@ -187,7 +189,7 @@ export function leave (vnode: VNodeWithData, rm: Function) {
       nextFrame(() => {
         removeTransitionClass(el, leaveClass)
         if (!cb.cancelled && !userWantsControl) {
-          whenTransitionEnds(el, cb)
+          whenTransitionEnds(el, type, cb)
         }
       })
     }

src/platforms/web/runtime/transition-util.js

@@ -45,8 +45,12 @@ export function removeTransitionClass (el: any, cls: string) {
   removeClass(el, cls)
 }
 
-export function whenTransitionEnds (el: Element, cb: Function) {
-  const { type, timeout, propCount } = getTransitionInfo(el)
+export function whenTransitionEnds (
+  el: Element,
+  expectedType: ?stirng,
+  cb: Function
+) {
+  const { type, timeout, propCount } = getTransitionInfo(el, expectedType)
   if (!type) return cb()
   const event = type === TRANSITION ? transitionEndEvent : animationEndEvent
   let ended = 0
@@ -69,34 +73,56 @@ export function whenTransitionEnds (el: Element, cb: Function) {
 
 const transformRE = /\b(transform|all)(,|$)/
 
-export function getTransitionInfo (el: Element): {
-  type: ?string,
-  propCount: number,
-  timeout: number
+export function getTransitionInfo (el: Element, expectedType?: ?string): {
+  type: ?string;
+  propCount: number;
+  timeout: number;
 } {
   const styles = window.getComputedStyle(el)
-  const transitionProps = styles[transitionProp + 'Property']
   const transitioneDelays = styles[transitionProp + 'Delay'].split(', ')
   const transitionDurations = styles[transitionProp + 'Duration'].split(', ')
+  const transitionTimeout = getTimeout(transitioneDelays, transitionDurations)
   const animationDelays = styles[animationProp + 'Delay'].split(', ')
   const animationDurations = styles[animationProp + 'Duration'].split(', ')
-  const transitionTimeout = getTimeout(transitioneDelays, transitionDurations)
   const animationTimeout = getTimeout(animationDelays, animationDurations)
-  const timeout = Math.max(transitionTimeout, animationTimeout)
-  const type = timeout > 0
-    ? transitionTimeout > animationTimeout
-      ? TRANSITION
-      : ANIMATION
-    : null
-  return {
-    type,
-    timeout,
-    propCount: type
+
+  let type
+  let timeout = 0
+  let propCount = 0
+  /* istanbul ignore if */
+  if (expectedType === TRANSITION) {
+    if (transitionTimeout > 0) {
+      type = TRANSITION
+      timeout = transitionTimeout
+      propCount = transitionDurations.length
+    }
+  } else if (expectedType === ANIMATION) {
+    if (animationTimeout > 0) {
+      type = ANIMATION
+      timeout = animationTimeout
+      propCount = animationDurations.length
+    }
+  } else {
+    timeout = Math.max(transitionTimeout, animationTimeout)
+    type = timeout > 0
+      ? transitionTimeout > animationTimeout
+        ? TRANSITION
+        : ANIMATION
+      : null
+    propCount = type
       ? type === TRANSITION
         ? transitionDurations.length
         : animationDurations.length
-      : 0,
-    hasTransform: type === TRANSITION && transformRE.test(transitionProps)
+      : 0
+  }
+  const hasTransform =
+    type === TRANSITION &&
+    transformRE.test(styles[transitionProp + 'Property'])
+  return {
+    type,
+    timeout,
+    propCount,
+    hasTransform
   }
 }
 

test/unit/features/transition/inject-styles.js

@@ -33,6 +33,14 @@ export default function injectStyles () {
       animation: test-leave ${duration}ms;
       -webkit-animation: test-leave ${duration}ms;
     }
+    .test-anim-long-enter-active {
+      animation: test-enter ${duration * 2}ms;
+      -webkit-animation: test-enter ${duration * 2}ms;
+    }
+    .test-anim-long-leave-active {
+      animation: test-leave ${duration * 2}ms;
+      -webkit-animation: test-leave ${duration * 2}ms;
+    }
     @keyframes test-enter {
       from { opacity: 0 }
       to { opacity: 1 }

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

@@ -488,28 +488,64 @@ if (!isIE9) {
         template: `
           <div>
             <transition name="test-anim">
-              <div v-if="ok" class="test">foo</div>
+              <div v-if="ok">foo</div>
             </transition>
           </div>
         `,
         data: { ok: true }
       }).$mount(el)
 
       // should not apply transition on initial render by default
-      expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')
+      expect(vm.$el.innerHTML).toBe('<div>foo</div>')
       vm.ok = false
       waitForUpdate(() => {
-        expect(vm.$el.children[0].className).toBe('test test-anim-leave test-anim-leave-active')
+        expect(vm.$el.children[0].className).toBe('test-anim-leave test-anim-leave-active')
       }).thenWaitFor(nextFrame).then(() => {
-        expect(vm.$el.children[0].className).toBe('test test-anim-leave-active')
+        expect(vm.$el.children[0].className).toBe('test-anim-leave-active')
       }).thenWaitFor(duration + 10).then(() => {
         expect(vm.$el.children.length).toBe(0)
         vm.ok = true
       }).then(() => {
-        expect(vm.$el.children[0].className).toBe('test test-anim-enter test-anim-enter-active')
+        expect(vm.$el.children[0].className).toBe('test-anim-enter test-anim-enter-active')
       }).thenWaitFor(nextFrame).then(() => {
-        expect(vm.$el.children[0].className).toBe('test test-anim-enter-active')
+        expect(vm.$el.children[0].className).toBe('test-anim-enter-active')
       }).thenWaitFor(duration + 10).then(() => {
+        expect(vm.$el.children[0].className).toBe('')
+      }).then(done)
+    })
+
+    it('explicit transition type', done => {
+      const vm = new Vue({
+        template: `
+          <div>
+            <transition name="test-anim-long" type="animation">
+              <div v-if="ok" class="test">foo</div>
+            </transition>
+          </div>
+        `,
+        data: { ok: true }
+      }).$mount(el)
+
+      // should not apply transition on initial render by default
+      expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')
+      vm.ok = false
+      waitForUpdate(() => {
+        expect(vm.$el.children[0].className).toBe('test test-anim-long-leave test-anim-long-leave-active')
+      }).thenWaitFor(nextFrame).then(() => {
+        expect(vm.$el.children[0].className).toBe('test test-anim-long-leave-active')
+      }).thenWaitFor(duration + 5).then(() => {
+        // should not end early due to transition presence
+        expect(vm.$el.children[0].className).toBe('test test-anim-long-leave-active')
+      }).thenWaitFor(duration + 5).then(() => {
+        expect(vm.$el.children.length).toBe(0)
+        vm.ok = true
+      }).then(() => {
+        expect(vm.$el.children[0].className).toBe('test test-anim-long-enter test-anim-long-enter-active')
+      }).thenWaitFor(nextFrame).then(() => {
+        expect(vm.$el.children[0].className).toBe('test test-anim-long-enter-active')
+      }).thenWaitFor(duration + 5).then(() => {
+        expect(vm.$el.children[0].className).toBe('test test-anim-long-enter-active')
+      }).thenWaitFor(duration + 5).then(() => {
         expect(vm.$el.children[0].className).toBe('test')
       }).then(done)
     })