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

---
 .../veui-theme-dls/components/transition.less | 151 ++++++++++++++++++
 packages/veui-theme-dls/index.js              |  15 +-
 packages/veui/components.json                 |  42 +++--
 packages/veui/demo/cases/Transition.vue       |  92 +++++++++++
 packages/veui/demo/cases/index.js             |   6 +
 packages/veui/src/components/Transition.vue   |  35 ++++
 packages/veui/src/components/index.js         |   1 +
 7 files changed, 318 insertions(+), 24 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..62349843e
--- /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;
+    opacity: 1;
+    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;
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+    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;
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+    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;
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+    transition-timing-function: linear;
+  }
+
+  &-fade-scale-y-leave-to,
+  &-fade-scale-y-enter {
+    opacity: 0;
+    transform: scale3d(1, 0, 1);
+  }
+
+  // 移入
+  &-translate-leave-active {
+    transition-duration: 100ms;
+    transition-timing-function: ease-in;
+  }
+
+  &-translate-enter-active {
+    transition-duration: 200ms;
+    transition-timing-function: ease-out;
+  }
+
+  &-translate-leave-active,
+  &-translate-enter-active {
+    transition-property: transform;
+    transform: translate3d(
+      var(--dls-transition-translate-to-x, 0),
+      var(--dls-transition-translate-to-y, 0),
+      0
+    );
+  }
+
+  &-translate-leave-to,
+  &-translate-enter {
+    transform: translate3d(
+      var(--dls-transition-translate-from-x, 0),
+      var(--dls-transition-translate-from-y, 0),
+      0
+    );
+  }
+
+  &-fade-translate-scale-leave-active {
+    transition-duration: 100ms;
+  }
+
+  &-fade-translate-scale-enter-active {
+    transition-duration: 200ms;
+  }
+
+  &-fade-translate-scale-leave-active,
+  &-fade-translate-scale-enter-active {
+    transition-property: opacity, transform;
+    opacity: 1;
+    transform: translate3d(
+        var(--dls-transition-translate-to-x, 0),
+        var(--dls-transition-translate-to-y, 0),
+        0
+      )
+      scale3d(1, 1, 1);
+  }
+
+  &-fade-translate-scale-leave-to,
+  &-fade-translate-scale-enter {
+    opacity: 0;
+    transform: translate3d(
+        var(--dls-transition-translate-from-x, 0),
+        var(--dls-transition-translate-from-y, 0),
+        0
+      )
+      scale3d(0, 0, 1);
+  }
+}
diff --git a/packages/veui-theme-dls/index.js b/packages/veui-theme-dls/index.js
index b1a9fdb98..02c4ecb54 100644
--- a/packages/veui-theme-dls/index.js
+++ b/packages/veui-theme-dls/index.js
@@ -1,4 +1,5 @@
 // This file is generated automatically by `npm run theme`
+import './components/Collapse'
 import './components/Accordion'
 import './components/Loading'
 import './components/Button'
@@ -21,15 +22,15 @@ import './components/Carousel'
 import './components/CascaderPane'
 import './components/Tag'
 import './components/Cascader'
+import './components/Tooltip'
+import './components/Popover'
 import './components/CheckButtonGroup'
 import './components/Radio'
 import './components/CheckboxGroup'
-import './components/Collapse'
 import './components/DatePicker'
 import './components/InputGroup'
 import './components/SearchBox'
 import './components/Dropdown'
-import './components/Tooltip'
 import './components/Field'
 import './components/Fieldset'
 import './components/FilterPanel'
@@ -41,7 +42,6 @@ import './components/Nav'
 import './components/NumberInput'
 import './components/Select'
 import './components/Pagination'
-import './components/Popover'
 import './components/Progress'
 import './components/RadioButtonGroup'
 import './components/RadioGroup'
@@ -58,8 +58,9 @@ import './components/Transfer'
 import './components/Uploader'
 
 import './common.less'
-import './components/accordion.less'
 import './components/icon.less'
+import './components/collapse.less'
+import './components/accordion.less'
 import './components/loading.less'
 import './components/button.less'
 import './components/alert.less'
@@ -83,10 +84,11 @@ import './components/carousel.less'
 import './components/cascader-pane.less'
 import './components/tag.less'
 import './components/cascader.less'
+import './components/tooltip.less'
+import './components/popover.less'
 import './components/check-button-group.less'
 import './components/radio.less'
 import './components/checkbox-group.less'
-import './components/collapse.less'
 import './components/confirm-box.less'
 import './components/date-picker.less'
 import './components/drawer.less'
@@ -94,7 +96,6 @@ import './components/input-group.less'
 import './components/search-box.less'
 import './components/dropdown.less'
 import './components/embedded.less'
-import './components/tooltip.less'
 import './components/field.less'
 import './components/fieldset.less'
 import './components/filter-panel.less'
@@ -108,7 +109,6 @@ import './components/nav.less'
 import './components/number-input.less'
 import './components/select.less'
 import './components/pagination.less'
-import './components/popover.less'
 import './components/progress.less'
 import './components/prompt-box.less'
 import './components/radio-button-group.less'
@@ -125,4 +125,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 31b908f0c..3d1094594 100644
--- a/packages/veui/components.json
+++ b/packages/veui/components.json
@@ -1,12 +1,20 @@
 [
   {
-    "name": "Accordion",
-    "path": "Accordion.vue"
+    "name": "mixin",
+    "path": "Carousel/mixin.js"
   },
   {
     "name": "Icon",
     "path": "Icon.vue"
   },
+  {
+    "name": "Collapse",
+    "path": "Collapse.vue"
+  },
+  {
+    "name": "Accordion",
+    "path": "Accordion.vue"
+  },
   {
     "name": "Loading",
     "path": "Loading.vue"
@@ -143,6 +151,14 @@
     "name": "Cascader",
     "path": "Cascader/index.js"
   },
+  {
+    "name": "Tooltip",
+    "path": "Tooltip.vue"
+  },
+  {
+    "name": "Popover",
+    "path": "Popover.vue"
+  },
   {
     "name": "CheckButtonGroup",
     "path": "CheckButtonGroup.vue"
@@ -155,10 +171,6 @@
     "name": "CheckboxGroup",
     "path": "CheckboxGroup.vue"
   },
-  {
-    "name": "Collapse",
-    "path": "Collapse.vue"
-  },
   {
     "name": "Column",
     "path": "Column.js"
@@ -203,10 +215,6 @@
     "name": "Label",
     "path": "Label.vue"
   },
-  {
-    "name": "Tooltip",
-    "path": "Tooltip.vue"
-  },
   {
     "name": "Field",
     "path": "Field.js"
@@ -229,15 +237,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",
@@ -303,10 +311,6 @@
     "name": "Pagination",
     "path": "Pagination.vue"
   },
-  {
-    "name": "Popover",
-    "path": "Popover.vue"
-  },
   {
     "name": "Progress",
     "path": "Progress.vue"
@@ -415,6 +419,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..42efb6595
--- /dev/null
+++ b/packages/veui/demo/cases/Transition.vue
@@ -0,0 +1,92 @@
+<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>
+</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,
+      exist: transitions.reduce((acc, val) => {
+        acc[val] = true
+        return acc
+      }, {})
+    }
+  },
+  methods: {
+    getStyle (item) {
+      if (item.includes('translate')) {
+        return {
+          '--dls-transition-translate-from-x': '-150px',
+          '--dls-transition-translate-to-x': '0',
+          '--dls-transition-translate-from-y': '-150px',
+          '--dls-transition-translate-to-y': '0'
+        }
+      }
+
+      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 b8c5f42ca..a6bb06e16 100644
--- a/packages/veui/demo/cases/index.js
+++ b/packages/veui/demo/cases/index.js
@@ -57,6 +57,7 @@ import VDragSort from './VDragSort'
 import Plugins from './Plugins'
 import Cascader from './Cascader'
 import ConfigProvider from './ConfigProvider'
+import Transition from './Transition'
 
 export default [
   {
@@ -69,6 +70,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..0e9ae1bc0
--- /dev/null
+++ b/packages/veui/src/components/Transition.vue
@@ -0,0 +1,35 @@
+<template>
+<transition :name="realName">
+  <slot/>
+</transition>
+</template>
+
+<script>
+import { prefixify } from '../mixins/prefix'
+
+const BUILTIN_TRANSITIONS = [
+  'fade',
+  'fade-scale',
+  'fade-scale-x',
+  'fade-scale-y',
+  'translate',
+  'fade-translate-scale'
+]
+
+export default {
+  name: 'veui-transition',
+  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 e336b13ca..43ae1714d 100644
--- a/packages/veui/src/components/index.js
+++ b/packages/veui/src/components/index.js
@@ -69,5 +69,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'