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] 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>