diff --git a/packages/veui-theme-dls/components/transition.less b/packages/veui-theme-dls/components/transition.less
new file mode 100644
index 000000000..27e223cef
--- /dev/null
+++ b/packages/veui-theme-dls/components/transition.less
@@ -0,0 +1,156 @@
+@import "../lib.less";
+
+.@{veui-prefix}-transition {
+  // 渐现 fade-in
+  &-fade-in-enter-active {
+    transition-duration: 200ms;
+    transition-property: opacity;
+    transition-timing-function: linear;
+  }
+
+  &-fade-in-enter {
+    opacity: 0;
+  }
+
+  // 放大渐现 scale-fade-in
+  &-scale-fade-in-enter-active {
+    transition-duration: 200ms;
+    transition-property: opacity, transform;
+    transition-timing-function: linear;
+  }
+
+  &-scale-fade-in-enter {
+    opacity: 0;
+    transform: scale3d(0, 0, 1);
+  }
+
+  // 移入 slide-in
+  &-slide-in-enter-active {
+    transition-property: transform;
+    transition-duration: 200ms;
+    transition-timing-function: ease-out;
+  }
+
+  &-slide-in-enter {
+    transform: translate3d(
+      var(--dls-transition-translate-from-x, 0),
+      var(--dls-transition-translate-from-y, 0),
+      0
+    );
+  }
+
+  // 渐现移入 slide-fade-in
+  &-slide-fade-in-enter-active {
+    transition-property: opacity, transform;
+    transition-duration: 200ms;
+    transition-timing-function: linear;
+  }
+
+  &-slide-fade-in-enter {
+    opacity: 0;
+    transform: translate3d(
+      var(--dls-transition-translate-from-x, 0),
+      var(--dls-transition-translate-from-y, 0),
+      0
+    );
+  }
+
+  // 渐变移入 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);
+  }
+
+  // 移动 move
+  &-move {
+    transition-property: transform;
+    transition-duration: 200ms;
+    transform: translate3d(
+      var(--dls-transition-translate-x, 0),
+      var(--dls-transition-translate-y, 0),
+      0
+    );
+  }
+
+  // 渐隐 fade-out
+  &-fade-out-leave-active {
+    transition-duration: 100ms;
+    transition-property: opacity;
+    transition-timing-function: linear;
+  }
+
+  &-fade-out-leave-to {
+    opacity: 0;
+  }
+
+  // 缩小渐隐 scale-fade-out
+  &-scale-fade-out-leave-active {
+    transition-duration: 100ms;
+    transition-property: opacity, transform;
+    transition-timing-function: linear;
+  }
+
+  &-scale-fade-out-leave-to {
+    opacity: 0;
+    transform: scale3d(0, 0, 1);
+  }
+
+  // 移出 slide-out
+  &-slide-out-leave-active {
+    transition-duration: 100ms;
+    transition-property: transform;
+    transition-timing-function: ease-in;
+  }
+
+  &-slide-out-leave-to {
+    transform: translate3d(
+      var(--dls-transition-translate-to-x, 0),
+      var(--dls-transition-translate-to-y, 0),
+      0
+    );
+  }
+
+  // 渐隐移出 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),
+      0
+    );
+  }
+
+  // 渐变移出 slide-scale-fade-out
+  &-slide-scale-fade-out-leave-active {
+    transition-duration: 100ms;
+    transition-property: opacity, transform;
+    transition-timing-function: ease-in;
+  }
+
+  &-slide-scale-fade-out-leave-to {
+    opacity: 0;
+    transform: translate3d(
+        var(--dls-transition-translate-to-x, 0),
+        var(--dls-transition-translate-to-y, 0),
+        0
+      )
+      scale3d(0, 0, 1);
+  }
+}
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..7d8aa2afe
--- /dev/null
+++ b/packages/veui/demo/cases/Transition.vue
@@ -0,0 +1,164 @@
+<template>
+<article class="veui-transition-demo">
+  <h1><code>&lt;veui-transition&gt;</code></h1>
+  <section
+    v-for="({ name, effect, style }, idx) in transitions"
+    :key="idx"
+  >
+    <veui-button @click="handleClick(effect)">{{ name }}</veui-button>
+    <veui-transition
+      :name="effect"
+      appear
+      :style="
+        effect !== 'move'
+          ? style
+          : {
+            '--dls-transition-translate-x': `${50 * count}px`,
+            '--dls-transition-translate-y': '0px'
+          }
+      "
+      @after-leave="afterOut(effect)"
+    >
+      <div
+        v-if="trigger[effect]"
+        class="content"
+      />
+    </veui-transition>
+  </section>
+</article>
+</template>
+
+<script>
+import { Transition, Button } from 'veui'
+
+const transitions = [
+  {
+    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 {
+  name: 'demo-transition',
+  components: {
+    'veui-transition': Transition,
+    'veui-button': Button
+  },
+  data () {
+    return {
+      transitions,
+      count: 0,
+      trigger: transitions.reduce((acc, { effect }) => {
+        acc[effect] = true
+        return acc
+      }, {})
+    }
+  },
+  methods: {
+    afterOut (effect) {
+      if (effect.includes('out')) {
+        setTimeout(() => {
+          this.trigger[effect] = true
+        }, 600)
+      }
+    },
+    handleClick (effect) {
+      if (effect === 'move') {
+        this.count++
+        this.count %= 4
+        return
+      }
+
+      if (effect.includes('in')) {
+        this.trigger[effect] = false
+        this.$nextTick(() => {
+          this.trigger[effect] = true
+        })
+      } else if (effect.includes('out')) {
+        this.trigger[effect] = false
+      }
+    }
+  }
+}
+</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..f5607117c
--- /dev/null
+++ b/packages/veui/src/components/Transition.vue
@@ -0,0 +1,83 @@
+<script>
+import { prefixify } from '../mixins/prefix'
+
+const BUILTIN_TRANSITIONS = [
+  'fade-in',
+  'scale-fade-in',
+  'slide-in',
+  'slide-fade-in',
+  'slide-scale-fade-in',
+  'move',
+  '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,
+  props: {
+    name: {
+      type: String,
+      validator (val) {
+        return BUILTIN_TRANSITIONS.indexOf(val) >= 0
+      }
+    }
+  },
+  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>
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'