refactor: refine transitions and implement the move effect naively

Author: xiaodemen

packages/veui-theme-dls/components/transition.less

@@ -1,151 +1,156 @@
 @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),
       0
     );
   }
 
-  &-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),
         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
-    );
-  }
 }