From 383d5b387f11cc86642b9f5856c2656d9e37ea05 Mon Sep 17 00:00:00 2001
From: xiaodemen <fuq_pr@163.com>
Date: Wed, 29 Dec 2021 10:41:53 +0800
Subject: [PATCH 1/2] feat: add basic transition

tmp
---
 .../veui-theme-dls/components/transition.less | 151 ++++++++++++++++++
 packages/veui-theme-dls/index.js              |   1 +
 packages/veui/components.json                 |  10 +-
 packages/veui/demo/cases/Transition.vue       | 115 +++++++++++++
 packages/veui/demo/cases/index.js             |   6 +
 packages/veui/src/components/Transition.vue   |  40 +++++
 packages/veui/src/components/index.js         |   1 +
 7 files changed, 321 insertions(+), 3 deletions(-)
 create mode 100644 packages/veui-theme-dls/components/transition.less
 create mode 100644 packages/veui/demo/cases/Transition.vue
 create mode 100644 packages/veui/src/components/Transition.vue

diff --git a/packages/veui-theme-dls/components/transition.less b/packages/veui-theme-dls/components/transition.less
new file mode 100644
index 000000000..ef1af9f60
--- /dev/null
+++ b/packages/veui-theme-dls/components/transition.less
@@ -0,0 +1,151 @@
+@import "../lib.less";
+
+.@{veui-prefix}-transition {
+  // 渐隐渐现
+  &-fade-leave-active {
+    transition-duration: 100ms;
+  }
+
+  &-fade-enter-active {
+    transition-duration: 200ms;
+  }
+
+  &-fade-leave-active,
+  &-fade-enter-active {
+    transition-property: opacity;
+    transition-timing-function: linear;
+  }
+
+  &-fade-leave-to,
+  &-fade-enter {
+    opacity: 0;
+  }
+
+  // 放大渐现，缩小渐隐
+  &-fade-scale-leave-active {
+    transition-duration: 100ms;
+  }
+
+  &-fade-scale-enter-active {
+    transition-duration: 200ms;
+  }
+
+  &-fade-scale-leave-active,
+  &-fade-scale-enter-active {
+    transition-property: opacity, transform;
+    transition-timing-function: linear;
+  }
+
+  &-fade-scale-leave-to,
+  &-fade-scale-enter {
+    opacity: 0;
+    transform: scale3d(0, 0, 1);
+  }
+
+  &-fade-scale-x-leave-active {
+    transition-duration: 100ms;
+  }
+
+  &-fade-scale-x-enter-active {
+    transition-duration: 200ms;
+  }
+
+  &-fade-scale-x-leave-active,
+  &-fade-scale-x-enter-active {
+    transition-property: opacity, transform;
+    transition-timing-function: linear;
+  }
+
+  &-fade-scale-x-leave-to,
+  &-fade-scale-x-enter {
+    opacity: 0;
+    transform: scale3d(0, 1, 1);
+  }
+
+  &-fade-scale-y-leave-active {
+    transition-duration: 100ms;
+  }
+
+  &-fade-scale-y-enter-active {
+    transition-duration: 200ms;
+  }
+
+  &-fade-scale-y-leave-active,
+  &-fade-scale-y-enter-active {
+    transition-property: opacity, transform;
+    transition-timing-function: linear;
+  }
+
+  &-fade-scale-y-leave-to,
+  &-fade-scale-y-enter {
+    opacity: 0;
+    transform: scale3d(1, 0, 1);
+  }
+
+  // 移入，移出
+  &-translate-leave-active {
+    transition-property: transform;
+    transition-duration: 100ms;
+    transition-timing-function: ease-in;
+  }
+
+  &-translate-enter-active {
+    transition-property: transform;
+    transition-duration: 200ms;
+    transition-timing-function: ease-out;
+  }
+
+  &-translate-enter {
+    transform: translate3d(
+      var(--dls-transition-translate-from-x, 0),
+      var(--dls-transition-translate-from-y, 0),
+      0
+    );
+  }
+
+  &-translate-leave-to {
+    transform: translate3d(
+      var(--dls-transition-translate-to-x, 0),
+      var(--dls-transition-translate-to-y, 0),
+      0
+    );
+  }
+
+  &-fade-translate-scale-leave-active {
+    transition-property: opacity, transform;
+    transition-duration: 100ms;
+  }
+
+  &-fade-translate-scale-enter-active {
+    transition-property: opacity, transform;
+    transition-duration: 200ms;
+  }
+
+  &-fade-translate-scale-enter {
+    transform: translate3d(
+        var(--dls-transition-translate-from-x, 0),
+        var(--dls-transition-translate-from-y, 0),
+        0
+      )
+      scale3d(0, 0, 1);
+  }
+
+  &-fade-translate-scale-leave-to {
+    transform: translate3d(
+        var(--dls-transition-translate-to-x, 0),
+        var(--dls-transition-translate-to-y, 0),
+        0
+      )
+      scale3d(0, 0, 1);
+  }
+
+  &-move {
+    transition-property: transform;
+    transition-duration: 200ms;
+    transform: translate3d(
+      var(--dls-transition-translate-x, 0),
+      var(--dls-transition-translate-y, 0),
+      0
+    );
+  }
+}
diff --git a/packages/veui-theme-dls/index.js b/packages/veui-theme-dls/index.js
index 20a6d81d2..29bc9abec 100644
--- a/packages/veui-theme-dls/index.js
+++ b/packages/veui-theme-dls/index.js
@@ -130,4 +130,5 @@ import './components/time-picker.less'
 import './components/toast.less'
 import './components/toast-list.less'
 import './components/transfer.less'
+import './components/transition.less'
 import './components/uploader.less'
diff --git a/packages/veui/components.json b/packages/veui/components.json
index cd8b9bf46..d8e451a58 100644
--- a/packages/veui/components.json
+++ b/packages/veui/components.json
@@ -249,15 +249,15 @@
   },
   {
     "name": "Form",
-    "path": "Form/Form.vue"
+    "path": "Form"
   },
   {
     "name": "Form",
-    "path": "Form"
+    "path": "Form/index.js"
   },
   {
     "name": "Form",
-    "path": "Form/index.js"
+    "path": "Form/Form.vue"
   },
   {
     "name": "GridColumn",
@@ -455,6 +455,10 @@
     "name": "Transfer",
     "path": "Transfer/index.js"
   },
+  {
+    "name": "Transition",
+    "path": "Transition.vue"
+  },
   {
     "name": "Uploader",
     "path": "Uploader/Uploader.vue"
diff --git a/packages/veui/demo/cases/Transition.vue b/packages/veui/demo/cases/Transition.vue
new file mode 100644
index 000000000..adb9de792
--- /dev/null
+++ b/packages/veui/demo/cases/Transition.vue
@@ -0,0 +1,115 @@
+<template>
+<article class="veui-transition-demo">
+  <h1><code>&lt;veui-transition&gt;</code></h1>
+  <section
+    v-for="(item, idx) in transitions"
+    :key="idx"
+  >
+    <veui-button @click="exist[item] = !exist[item]">{{ item }}</veui-button>
+    <veui-transition
+      :name="item"
+      appear
+      :style="getStyle(item)"
+    >
+      <div
+        v-if="exist[item]"
+        class="content"
+      />
+    </veui-transition>
+  </section>
+  <section key="99">
+    <veui-button
+      @click="
+        count++
+        count %= 4
+      "
+    >move</veui-button>
+    <veui-transition
+      name="move"
+      appear
+      :style="getStyle('move')"
+    >
+      <div class="content"/>
+    </veui-transition>
+  </section>
+</article>
+</template>
+
+<script>
+import { Transition, Button } from 'veui'
+
+const transitions = [
+  'fade',
+  'fade-scale',
+  'fade-scale-x',
+  'fade-scale-y',
+  'translate',
+  'fade-translate-scale'
+]
+
+export default {
+  name: 'demo-transition',
+  components: {
+    'veui-transition': Transition,
+    'veui-button': Button
+  },
+  data () {
+    return {
+      transitions,
+      count: 0,
+      exist: transitions.reduce((acc, val) => {
+        acc[val] = true
+        return acc
+      }, {})
+    }
+  },
+  methods: {
+    getStyle (item) {
+      if (item === 'move') {
+        return {
+          '--dls-transition-translate-x': `${50 * this.count}px`,
+          '--dls-transition-translate-y': '0px'
+        }
+      }
+
+      if (item.includes('translate')) {
+        return {
+          '--dls-transition-translate-from-x': '-150px',
+          '--dls-transition-translate-from-y': '-150px',
+          '--dls-transition-translate-to-x': '150px',
+          '--dls-transition-translate-to-y': '-150px'
+        }
+      }
+
+      if (item.includes('scale-x')) {
+        return {
+          'transform-origin': '0 50%'
+        }
+      }
+
+      if (item.includes('scale-y')) {
+        return {
+          'transform-origin': '50% 0'
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+section {
+  height: 150px;
+  display: flex;
+  align-items: center;
+}
+
+.content {
+  background-color: royalblue;
+  border-radius: 5%;
+  width: 60px;
+  height: 60px;
+  margin-right: 600px;
+  margin-left: auto;
+}
+</style>
diff --git a/packages/veui/demo/cases/index.js b/packages/veui/demo/cases/index.js
index b0fb49467..aad71f42d 100644
--- a/packages/veui/demo/cases/index.js
+++ b/packages/veui/demo/cases/index.js
@@ -58,6 +58,7 @@ import Plugins from './Plugins'
 import Cascader from './Cascader'
 import ConfigProvider from './ConfigProvider'
 import Layout from './Layout'
+import Transition from './Transition'
 
 export default [
   {
@@ -75,6 +76,11 @@ export default [
     name: 'Alert',
     component: Alert
   },
+  {
+    path: '/transition',
+    name: 'Transition',
+    component: Transition
+  },
   {
     path: '/alert-box',
     name: 'AlertBox',
diff --git a/packages/veui/src/components/Transition.vue b/packages/veui/src/components/Transition.vue
new file mode 100644
index 000000000..b719f582d
--- /dev/null
+++ b/packages/veui/src/components/Transition.vue
@@ -0,0 +1,40 @@
+<template>
+<transition
+  :name="realName"
+  v-bind="$attrs"
+>
+  <slot/>
+</transition>
+</template>
+
+<script>
+import { prefixify } from '../mixins/prefix'
+
+const BUILTIN_TRANSITIONS = [
+  'fade',
+  'fade-scale',
+  'fade-scale-x',
+  'fade-scale-y',
+  'translate',
+  'move',
+  'fade-translate-scale'
+]
+
+export default {
+  name: 'veui-transition',
+  inheritAttrs: false,
+  props: {
+    name: {
+      type: String,
+      validator (val) {
+        return BUILTIN_TRANSITIONS.indexOf(val) >= 0
+      }
+    }
+  },
+  computed: {
+    realName () {
+      return prefixify(`transition-${this.name}`)
+    }
+  }
+}
+</script>
diff --git a/packages/veui/src/components/index.js b/packages/veui/src/components/index.js
index be62a518a..d4cc7808b 100644
--- a/packages/veui/src/components/index.js
+++ b/packages/veui/src/components/index.js
@@ -74,5 +74,6 @@ export { default as Toast } from './Toast'
 export { default as ToastList } from './ToastList'
 export { default as Tooltip } from './Tooltip'
 export { default as Transfer } from './Transfer'
+export { default as Transition } from './Transition'
 export { default as Tree } from './Tree'
 export { default as Uploader } from './Uploader'

From 6bc0e896d43457ffa30806c4885286401d643cd9 Mon Sep 17 00:00:00 2001
From: xiaodemen <fuq_pr@163.com>
Date: Tue, 18 Jan 2022 21:09:40 +0800
Subject: [PATCH 2/2] refactor: refine transitions and implement the `move`
 effect naively

---
 .../veui-theme-dls/components/transition.less | 163 +++++++++---------
 packages/veui/demo/cases/Transition.vue       | 153 ++++++++++------
 packages/veui/src/components/Transition.vue   |  73 ++++++--
 3 files changed, 243 insertions(+), 146 deletions(-)

diff --git a/packages/veui-theme-dls/components/transition.less b/packages/veui-theme-dls/components/transition.less
index ef1af9f60..27e223cef 100644
--- a/packages/veui-theme-dls/components/transition.less
+++ b/packages/veui-theme-dls/components/transition.less
@@ -1,109 +1,135 @@
 @import "../lib.less";
 
 .@{veui-prefix}-transition {
-  // 渐隐渐现
-  &-fade-leave-active {
-    transition-duration: 100ms;
-  }
-
-  &-fade-enter-active {
+  // 渐现 fade-in
+  &-fade-in-enter-active {
     transition-duration: 200ms;
-  }
-
-  &-fade-leave-active,
-  &-fade-enter-active {
     transition-property: opacity;
     transition-timing-function: linear;
   }
 
-  &-fade-leave-to,
-  &-fade-enter {
+  &-fade-in-enter {
     opacity: 0;
   }
 
-  // 放大渐现，缩小渐隐
-  &-fade-scale-leave-active {
-    transition-duration: 100ms;
-  }
-
-  &-fade-scale-enter-active {
+  // 放大渐现 scale-fade-in
+  &-scale-fade-in-enter-active {
     transition-duration: 200ms;
-  }
-
-  &-fade-scale-leave-active,
-  &-fade-scale-enter-active {
     transition-property: opacity, transform;
     transition-timing-function: linear;
   }
 
-  &-fade-scale-leave-to,
-  &-fade-scale-enter {
+  &-scale-fade-in-enter {
     opacity: 0;
     transform: scale3d(0, 0, 1);
   }
 
-  &-fade-scale-x-leave-active {
-    transition-duration: 100ms;
+  // 移入 slide-in
+  &-slide-in-enter-active {
+    transition-property: transform;
+    transition-duration: 200ms;
+    transition-timing-function: ease-out;
   }
 
-  &-fade-scale-x-enter-active {
-    transition-duration: 200ms;
+  &-slide-in-enter {
+    transform: translate3d(
+      var(--dls-transition-translate-from-x, 0),
+      var(--dls-transition-translate-from-y, 0),
+      0
+    );
   }
 
-  &-fade-scale-x-leave-active,
-  &-fade-scale-x-enter-active {
+  // 渐现移入 slide-fade-in
+  &-slide-fade-in-enter-active {
     transition-property: opacity, transform;
+    transition-duration: 200ms;
     transition-timing-function: linear;
   }
 
-  &-fade-scale-x-leave-to,
-  &-fade-scale-x-enter {
+  &-slide-fade-in-enter {
     opacity: 0;
-    transform: scale3d(0, 1, 1);
+    transform: translate3d(
+      var(--dls-transition-translate-from-x, 0),
+      var(--dls-transition-translate-from-y, 0),
+      0
+    );
   }
 
-  &-fade-scale-y-leave-active {
-    transition-duration: 100ms;
+  // 渐变移入 slide-scale-fade-in
+  &-slide-scale-fade-in-enter-active {
+    transition-property: opacity, transform;
+    transition-duration: 200ms;
+    transition-timing-function: linear;
+  }
+
+  &-slide-scale-fade-in-enter {
+    opacity: 0;
+    transform: translate3d(
+        var(--dls-transition-translate-from-x, 0),
+        var(--dls-transition-translate-from-y, 0),
+        0
+      )
+      scale3d(0, 0, 1);
   }
 
-  &-fade-scale-y-enter-active {
+  // 移动 move
+  &-move {
+    transition-property: transform;
     transition-duration: 200ms;
+    transform: translate3d(
+      var(--dls-transition-translate-x, 0),
+      var(--dls-transition-translate-y, 0),
+      0
+    );
   }
 
-  &-fade-scale-y-leave-active,
-  &-fade-scale-y-enter-active {
-    transition-property: opacity, transform;
+  // 渐隐 fade-out
+  &-fade-out-leave-active {
+    transition-duration: 100ms;
+    transition-property: opacity;
     transition-timing-function: linear;
   }
 
-  &-fade-scale-y-leave-to,
-  &-fade-scale-y-enter {
+  &-fade-out-leave-to {
     opacity: 0;
-    transform: scale3d(1, 0, 1);
   }
 
-  // 移入，移出
-  &-translate-leave-active {
-    transition-property: transform;
+  // 缩小渐隐 scale-fade-out
+  &-scale-fade-out-leave-active {
     transition-duration: 100ms;
-    transition-timing-function: ease-in;
+    transition-property: opacity, transform;
+    transition-timing-function: linear;
+  }
+
+  &-scale-fade-out-leave-to {
+    opacity: 0;
+    transform: scale3d(0, 0, 1);
   }
 
-  &-translate-enter-active {
+  // 移出 slide-out
+  &-slide-out-leave-active {
+    transition-duration: 100ms;
     transition-property: transform;
-    transition-duration: 200ms;
-    transition-timing-function: ease-out;
+    transition-timing-function: ease-in;
   }
 
-  &-translate-enter {
+  &-slide-out-leave-to {
     transform: translate3d(
-      var(--dls-transition-translate-from-x, 0),
-      var(--dls-transition-translate-from-y, 0),
+      var(--dls-transition-translate-to-x, 0),
+      var(--dls-transition-translate-to-y, 0),
       0
     );
   }
 
-  &-translate-leave-to {
+  // 渐隐移出 slide-fade-out
+  &-slide-fade-out-leave-active {
+    transition-duration: 100ms;
+    transition-property: opacity, transform;
+    transition-timing-function: ease-in;
+  }
+
+  &-slide-fade-out-leave-to {
+    opacity: 0;
     transform: translate3d(
       var(--dls-transition-translate-to-x, 0),
       var(--dls-transition-translate-to-y, 0),
@@ -111,26 +137,15 @@
     );
   }
 
-  &-fade-translate-scale-leave-active {
-    transition-property: opacity, transform;
+  // 渐变移出 slide-scale-fade-out
+  &-slide-scale-fade-out-leave-active {
     transition-duration: 100ms;
-  }
-
-  &-fade-translate-scale-enter-active {
     transition-property: opacity, transform;
-    transition-duration: 200ms;
-  }
-
-  &-fade-translate-scale-enter {
-    transform: translate3d(
-        var(--dls-transition-translate-from-x, 0),
-        var(--dls-transition-translate-from-y, 0),
-        0
-      )
-      scale3d(0, 0, 1);
+    transition-timing-function: ease-in;
   }
 
-  &-fade-translate-scale-leave-to {
+  &-slide-scale-fade-out-leave-to {
+    opacity: 0;
     transform: translate3d(
         var(--dls-transition-translate-to-x, 0),
         var(--dls-transition-translate-to-y, 0),
@@ -138,14 +153,4 @@
       )
       scale3d(0, 0, 1);
   }
-
-  &-move {
-    transition-property: transform;
-    transition-duration: 200ms;
-    transform: translate3d(
-      var(--dls-transition-translate-x, 0),
-      var(--dls-transition-translate-y, 0),
-      0
-    );
-  }
 }
diff --git a/packages/veui/demo/cases/Transition.vue b/packages/veui/demo/cases/Transition.vue
index adb9de792..7d8aa2afe 100644
--- a/packages/veui/demo/cases/Transition.vue
+++ b/packages/veui/demo/cases/Transition.vue
@@ -2,36 +2,29 @@
 <article class="veui-transition-demo">
   <h1><code>&lt;veui-transition&gt;</code></h1>
   <section
-    v-for="(item, idx) in transitions"
+    v-for="({ name, effect, style }, idx) in transitions"
     :key="idx"
   >
-    <veui-button @click="exist[item] = !exist[item]">{{ item }}</veui-button>
+    <veui-button @click="handleClick(effect)">{{ name }}</veui-button>
     <veui-transition
-      :name="item"
+      :name="effect"
       appear
-      :style="getStyle(item)"
+      :style="
+        effect !== 'move'
+          ? style
+          : {
+            '--dls-transition-translate-x': `${50 * count}px`,
+            '--dls-transition-translate-y': '0px'
+          }
+      "
+      @after-leave="afterOut(effect)"
     >
       <div
-        v-if="exist[item]"
+        v-if="trigger[effect]"
         class="content"
       />
     </veui-transition>
   </section>
-  <section key="99">
-    <veui-button
-      @click="
-        count++
-        count %= 4
-      "
-    >move</veui-button>
-    <veui-transition
-      name="move"
-      appear
-      :style="getStyle('move')"
-    >
-      <div class="content"/>
-    </veui-transition>
-  </section>
 </article>
 </template>
 
@@ -39,12 +32,74 @@
 import { Transition, Button } from 'veui'
 
 const transitions = [
-  'fade',
-  'fade-scale',
-  'fade-scale-x',
-  'fade-scale-y',
-  'translate',
-  'fade-translate-scale'
+  {
+    name: '渐现',
+    effect: 'fade-in'
+  },
+  {
+    name: '放大渐现',
+    effect: 'scale-fade-in'
+  },
+  {
+    name: '移入',
+    effect: 'slide-in',
+    style: {
+      '--dls-transition-translate-from-x': '250px', // ?
+      '--dls-transition-translate-from-y': '0px'
+    }
+  },
+  {
+    name: '渐现移入',
+    effect: 'slide-fade-in',
+    style: {
+      '--dls-transition-translate-from-x': '250px',
+      '--dls-transition-translate-from-y': '0px'
+    }
+  },
+  {
+    name: '渐变移入',
+    effect: 'slide-scale-fade-in',
+    style: {
+      '--dls-transition-translate-from-x': '250px',
+      '--dls-transition-translate-from-y': '-250px'
+    }
+  },
+  {
+    name: '移动',
+    effect: 'move'
+  },
+  {
+    name: '渐隐',
+    effect: 'fade-out'
+  },
+  {
+    name: '缩小渐隐',
+    effect: 'scale-fade-out'
+  },
+  {
+    name: '移出',
+    effect: 'slide-out',
+    style: {
+      '--dls-transition-translate-to-x': '250px',
+      '--dls-transition-translate-to-y': '0px'
+    }
+  },
+  {
+    name: '渐隐移出',
+    effect: 'slide-fade-out',
+    style: {
+      '--dls-transition-translate-to-x': '250px',
+      '--dls-transition-translate-to-y': '0px'
+    }
+  },
+  {
+    name: '渐变移出',
+    effect: 'slide-scale-fade-out',
+    style: {
+      '--dls-transition-translate-to-x': '250px',
+      '--dls-transition-translate-to-y': '-250px'
+    }
+  }
 ]
 
 export default {
@@ -57,40 +112,34 @@ export default {
     return {
       transitions,
       count: 0,
-      exist: transitions.reduce((acc, val) => {
-        acc[val] = true
+      trigger: transitions.reduce((acc, { effect }) => {
+        acc[effect] = true
         return acc
       }, {})
     }
   },
   methods: {
-    getStyle (item) {
-      if (item === 'move') {
-        return {
-          '--dls-transition-translate-x': `${50 * this.count}px`,
-          '--dls-transition-translate-y': '0px'
-        }
+    afterOut (effect) {
+      if (effect.includes('out')) {
+        setTimeout(() => {
+          this.trigger[effect] = true
+        }, 600)
       }
-
-      if (item.includes('translate')) {
-        return {
-          '--dls-transition-translate-from-x': '-150px',
-          '--dls-transition-translate-from-y': '-150px',
-          '--dls-transition-translate-to-x': '150px',
-          '--dls-transition-translate-to-y': '-150px'
-        }
-      }
-
-      if (item.includes('scale-x')) {
-        return {
-          'transform-origin': '0 50%'
-        }
+    },
+    handleClick (effect) {
+      if (effect === 'move') {
+        this.count++
+        this.count %= 4
+        return
       }
 
-      if (item.includes('scale-y')) {
-        return {
-          'transform-origin': '50% 0'
-        }
+      if (effect.includes('in')) {
+        this.trigger[effect] = false
+        this.$nextTick(() => {
+          this.trigger[effect] = true
+        })
+      } else if (effect.includes('out')) {
+        this.trigger[effect] = false
       }
     }
   }
diff --git a/packages/veui/src/components/Transition.vue b/packages/veui/src/components/Transition.vue
index b719f582d..f5607117c 100644
--- a/packages/veui/src/components/Transition.vue
+++ b/packages/veui/src/components/Transition.vue
@@ -1,25 +1,26 @@
-<template>
-<transition
-  :name="realName"
-  v-bind="$attrs"
->
-  <slot/>
-</transition>
-</template>
-
 <script>
 import { prefixify } from '../mixins/prefix'
 
 const BUILTIN_TRANSITIONS = [
-  'fade',
-  'fade-scale',
-  'fade-scale-x',
-  'fade-scale-y',
-  'translate',
+  'fade-in',
+  'scale-fade-in',
+  'slide-in',
+  'slide-fade-in',
+  'slide-scale-fade-in',
   'move',
-  'fade-translate-scale'
+  'fade-out',
+  'scale-fade-out',
+  'slide-out',
+  'slide-fade-out',
+  'slide-scale-fade-out'
 ]
 
+const Wrapper = {
+  render () {
+    return this.$slots.default
+  }
+}
+
 export default {
   name: 'veui-transition',
   inheritAttrs: false,
@@ -34,7 +35,49 @@ export default {
   computed: {
     realName () {
       return prefixify(`transition-${this.name}`)
+    },
+    customListeners () {
+      return {
+        transitionstart: e => {
+          this.$emit('before-move', e.target)
+          this.$emit('move', e.target)
+        },
+        transitionend: e => {
+          this.$emit('after-move', e.target)
+        },
+        transitioncancel: e => {
+          this.$emit('move-cancelled', e.target)
+        }
+      }
+    }
+  },
+  render () {
+    if (this.name === 'move') {
+      // wrap 目的：加class/style/nativeOn 方便，不用 cloneVnode 了
+      return (
+        <Wrapper
+          class={this.realName}
+          {...{
+            attrs: { ...this.$attrs },
+            nativeOn: this.customListeners
+          }}
+        >
+          {this.$slots.default}
+        </Wrapper>
+      )
     }
+
+    return (
+      <transition
+        name={this.realName}
+        {...{
+          attrs: { ...this.$attrs },
+          on: this.$listeners
+        }}
+      >
+        {this.$slots.default}
+      </transition>
+    )
   }
 }
 </script>