feat: add basic transition

tmp

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
+    );
+  }
+}

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'

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"

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>

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',

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>

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'