perf(transition)： merge transition css to base.less (#851)

* perf(transition): merge transition css to base

* perf(transition): merge transition css to base

packages/theme/src/base/index.less

@@ -12,5 +12,6 @@
 
 @import './reset.less';
 @import './basic-var.less';
+@import './transition.less';
 @import '../error-page/index.less';
 @import '../svg/index.less';

packages/theme/src/base/transition.less

@@ -0,0 +1,119 @@
+/** 全局的动画，在collapse / picker / tooltip / popover 等组件有用到 
+vue2的动画状态类：  v-enter       v-enter-to  v-leave      v-leave-to 以及 v-enter-active, v-leave-active
+vue3的动画状态类：  v-enter-from  v-enter-to  v-leave-from v-leave-to 以及 v-enter-active, v-leave-active
+*/
+
+.fade-in-linear-enter-active,
+.fade-in-linear-leave-active {
+  transition: opacity 0.2s linear;
+}
+
+.fade-in-linear-enter,
+.fade-in-linear-enter-from,
+.fade-in-linear-leave-to {
+  opacity: 0;
+}
+
+.fade-in-enter-active,
+.fade-in-leave-active {
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+.fade-in-enter,
+.fade-in-enter-from,
+.fade-in-leave-to {
+  opacity: 0;
+}
+
+.zoom-in-center-enter-active,
+.zoom-in-center-leave-active {
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+.zoom-in-center-enter,
+.zoom-in-center-enter-from,
+.zoom-in-center-leave-to {
+  opacity: 0;
+  transform: scaleX(0);
+}
+
+.zoom-in-top-enter-active,
+.zoom-in-top-leave-active {
+  opacity: 1;
+  transform: scaleY(1);
+  transition:
+    transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
+    opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transform-origin: center top;
+}
+
+.zoom-in-top-enter,
+.zoom-in-top-enter-from,
+.zoom-in-top-leave-to {
+  opacity: 0;
+  transform: scaleY(0);
+}
+
+.zoom-in-bottom-enter-active,
+.zoom-in-bottom-leave-active {
+  opacity: 1;
+  transform: scaleY(1);
+  transition:
+    transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
+    opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transform-origin: center bottom;
+}
+
+.zoom-in-bottom-enter,
+.zoom-in-bottom-enter-from,
+.zoom-in-bottom-leave-to {
+  opacity: 0;
+  transform: scaleY(0);
+}
+
+.zoom-in-left-enter-active,
+.zoom-in-left-leave-active {
+  opacity: 1;
+  transform: scale(1, 1);
+  transition:
+    transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
+    opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transform-origin: top left;
+}
+
+.zoom-in-left-enter,
+.zoom-in-left-enter-from,
+.zoom-in-left-leave-to {
+  opacity: 0;
+  transform: scale(0.45, 0.45);
+}
+
+.list-enter-active,
+.list-leave-active {
+  transition: all 1s;
+}
+
+.list-enter,
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+.opacity-transition {
+  transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+.collapse-transition {
+  transition:
+    0.3s height ease-in-out,
+    0.3s padding-top ease-in-out,
+    0.3s padding-bottom ease-in-out;
+}
+
+.horizontal-collapse-transition {
+  transition:
+    0.3s width ease-in-out,
+    0.3s padding-left ease-in-out,
+    0.3s padding-right ease-in-out;
+}

packages/theme/src/collapse/index.less

@@ -16,134 +16,4 @@
 
 .@{collapse-prefix-cls} {
   .component-css-vars-collapse();
-
-  &fade-in-linear-enter-active,
-  &fade-in-linear-leave-active {
-    transition: opacity 0.2s linear;
-  }
-
-  &fade-in-linear-enter,
-  &fade-in-linear-enter-from,
-  &fade-in-linear-leave,
-  &fade-in-linear-leave-from,
-  &fade-in-linear-leave-active {
-    opacity: 0;
-  }
-
-  &fade-in-enter-active,
-  &fade-in-leave-active {
-    transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
-  }
-
-  &fade-in-enter,
-  &fade-in-enter-from,
-  &fade-in-leave-active {
-    opacity: 0;
-  }
-
-  &zoom-in-center-enter-active,
-  &zoom-in-center-leave-active {
-    transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
-  }
-
-  &zoom-in-center-enter,
-  &zoom-in-center-enter-from,
-  &zoom-in-center-leave-active {
-    opacity: 0;
-    transform: scaleX(0);
-  }
-
-  &zoom-in-top-enter-active,
-  &zoom-in-top-leave-active {
-    opacity: 1;
-    transform: scaleY(1);
-    transition:
-      transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-      opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-    transform-origin: center top;
-  }
-
-  &zoom-in-top-enter,
-  &zoom-in-top-enter-from,
-  &zoom-in-top-leave-active {
-    opacity: 0;
-    transform: scaleY(0);
-  }
-
-  &zoom-in-bottom-enter-active,
-  &zoom-in-bottom-leave-active {
-    opacity: 1;
-    transform: scaleY(1);
-    transition:
-      transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-      opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-    transform-origin: center bottom;
-  }
-
-  &zoom-in-bottom-enter,
-  &zoom-in-left-enter-from,
-  &zoom-in-bottom-leave-active {
-    opacity: 0;
-    transform: scaleY(0);
-  }
-
-  &zoom-in-left-enter-active,
-  &zoom-in-left-leave-active {
-    opacity: 1;
-    transform: scale(1, 1);
-    transition:
-      transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-      opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-    transform-origin: top left;
-  }
-
-  &zoom-in-left-enter,
-  &zoom-in-left-enter-from,
-  &zoom-in-left-leave-active {
-    opacity: 0;
-    transform: scale(0.45, 0.45);
-  }
-
-  &list-enter-active,
-  &list-leave-active {
-    transition: all 1s;
-  }
-
-  &list-enter,
-  &list-enter-from,
-  &list-leave-active {
-    opacity: 0;
-    transform: translateY(-30px);
-  }
-
-  &opacity-transition {
-    transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
-  }
-}
-
-.collapse-transition {
-  transition:
-    0.3s height ease-in-out,
-    0.3s padding-top ease-in-out,
-    0.3s padding-bottom ease-in-out;
-}
-
-.horizontal-collapse-transition {
-  transition:
-    0.3s width ease-in-out,
-    0.3s padding-left ease-in-out,
-    0.3s padding-right ease-in-out;
-}
-
-.fade-in-linear-enter,
-.fade-in-linear-enter-from,
-.fade-in-linear-leave,
-.fade-in-linear-leave-from,
-.fade-in-linear-leave-active {
-  opacity: 0;
-}
-
-.fade-in-linear-enter-active,
-.fade-in-linear-leave-active {
-  transition: opacity 0.2s linear;
 }

packages/theme/src/picker/index.less

@@ -318,135 +318,3 @@
     }
   }
 }
-
-.@{css-prefix} {
-  &fade-in-linear-enter-active,
-  &fade-in-linear-leave-active {
-    transition: opacity 0.2s linear;
-  }
-
-  &fade-in-linear-enter,
-  &fade-in-linear-enter-from,
-  &fade-in-linear-leave,
-  &fade-in-linear-leave-from,
-  &fade-in-linear-leave-active {
-    opacity: 0;
-  }
-
-  &fade-in-enter-active,
-  &fade-in-leave-active {
-    transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
-  }
-
-  &fade-in-enter,
-  &fade-in-enter-from,
-  &fade-in-leave-active {
-    opacity: 0;
-  }
-
-  &zoom-in-center-enter-active,
-  &zoom-in-center-leave-active {
-    transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
-  }
-
-  &zoom-in-center-enter,
-  &zoom-in-center-enter-from,
-  &zoom-in-center-leave-active {
-    opacity: 0;
-    transform: scaleX(0);
-  }
-
-  &zoom-in-top-enter-active,
-  &zoom-in-top-leave-active {
-    opacity: 1;
-    transform: scaleY(1);
-    transition:
-      transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-      opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-    transform-origin: center top;
-  }
-
-  &zoom-in-top-enter,
-  &zoom-in-top-enter-from,
-  &zoom-in-top-leave-active {
-    opacity: 0;
-    transform: scaleY(0);
-  }
-
-  &zoom-in-bottom-enter-active,
-  &zoom-in-bottom-leave-active {
-    opacity: 1;
-    transform: scaleY(1);
-    transition:
-      transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-      opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-    transform-origin: center bottom;
-  }
-
-  &zoom-in-bottom-enter,
-  &zoom-in-bottom-enter-from,
-  &zoom-in-bottom-leave-active {
-    opacity: 0;
-    transform: scaleY(0);
-  }
-
-  &zoom-in-left-enter-active,
-  &zoom-in-left-leave-active {
-    opacity: 1;
-    transform: scale(1, 1);
-    transition:
-      transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-      opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-    transform-origin: top left;
-  }
-
-  &zoom-in-left-enter,
-  &zoom-in-left-enter-from,
-  &zoom-in-left-leave-active {
-    opacity: 0;
-    transform: scale(0.45, 0.45);
-  }
-
-  &list-enter-active,
-  &list-leave-active {
-    transition: all 1s;
-  }
-
-  &list-enter,
-  &list-enter-from,
-  &list-leave-active {
-    opacity: 0;
-    transform: translateY(-30px);
-  }
-
-  &opacity-transition {
-    transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
-  }
-}
-
-.collapse-transition {
-  transition:
-    0.3s height ease-in-out,
-    0.3s padding-top ease-in-out,
-    0.3s padding-bottom ease-in-out;
-}
-
-.horizontal-collapse-transition {
-  transition:
-    0.3s width ease-in-out,
-    0.3s padding-left ease-in-out,
-    0.3s padding-right ease-in-out;
-}
-
-.fade-in-linear-enter,
-.fade-in-linear-enter-from,
-.fade-in-linear-leave,
-.fade-in-linear-leave-from,
-.fade-in-linear-leave-active {
-  opacity: 0;
-}
-
-.fade-in-linear-enter-active,
-.fade-in-linear-leave-active {
-  transition: opacity 0.2s linear;
-}

packages/theme/src/tooltip/index.less

@@ -191,29 +191,3 @@
     }
   }
 }
-
-.@{css-prefix} {
-  &fade-in-linear-enter-active,
-  &fade-in-linear-leave-active {
-    transition: opacity 0.2s linear;
-  }
-
-  &fade-in-linear-enter,
-  &fade-in-linear-enter-from,
-  &fade-in-linear-leave,
-  &fade-in-linear-leave-from,
-  &fade-in-linear-leave-active {
-    opacity: 0;
-  }
-
-  &fade-in-enter-active,
-  &fade-in-leave-active {
-    transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
-  }
-
-  &fade-in-enter,
-  &fade-in-enter-from,
-  &fade-in-leave-active {
-    opacity: 0;
-  }
-}