@alauda/ui 6.4.8-beta.36 → 6.4.8-beta.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alauda/ui",
-  "version": "6.4.8-beta.36",
+  "version": "6.4.8-beta.37",
   "description": "Angular UI components by Alauda Frontend Team.",
   "repository": "git+https://github.com/alauda/alauda-ui.git",
   "author": "Alauda Frontend",

package/theme/_base-var.scss

@@ -20,5 +20,12 @@
 }
 
 // Animation
-$animation-duration: 0.3s;
+$animation-duration-slow: 0.3s; // Modal
+$animation-duration-base: 0.24s; // Tab、Dropdown
+$animation-duration-fast: 0.2s;
+
+$ease-out: cubic-bezier(0, 0, 0.2, 1);
+$ease-in: cubic-bezier(0.8, 0, 1, 0.9);
+$ease-in-out: cubic-bezier(0.38, 0, 0.24, 1);
+
 $animation-interpolation: ease;

package/theme/_mixin.scss

@@ -133,8 +133,14 @@
   }
 }
 
+@mixin overlay-pane() {
+  justify-content: center;
+  overflow: auto;
+  @include scroll-bar;
+}
+
 @mixin transition($target: all) {
-  transition: $target $animation-duration $animation-interpolation;
+  transition: $target $animation-duration-slow $animation-interpolation;
 }
 
 @mixin absolute-center() {
@@ -142,6 +148,7 @@
   position: absolute;
   top: 50%;
   left: 50%;
+  transform-origin: -50% -50%;
   transform: translate(-50%, -50%);
 }
 
@@ -299,3 +306,36 @@
   background-size: 100% 14px;
   height: 100%;
 }
+
+// Motion
+@mixin motion-common($duration: $animation-duration-base) {
+  animation-duration: $duration;
+  animation-fill-mode: both;
+}
+
+@mixin use-motion(
+  $className,
+  $keyframeName,
+  $duration: $animation-duration-base
+) {
+  .#{$className}-enter {
+    @include motion-common($duration);
+
+    animation-play-state: paused;
+  }
+  .#{$className}-leave {
+    @include motion-common($duration);
+
+    animation-play-state: paused;
+  }
+
+  .#{$className}-enter.#{$className}-enter-active {
+    animation-name: #{$keyframeName}-in;
+    animation-play-state: running;
+  }
+  .#{$className}-leave.#{$className}-leave-active {
+    animation-name: #{$keyframeName}-out;
+    animation-play-state: running;
+    pointer-events: none;
+  }
+}

package/utils/fn.d.ts

@@ -4,3 +4,7 @@ export declare const last: <T>(values: T[]) => T;
 export declare const isTemplateRef: (label: any) => label is TemplateRef<unknown>;
 export declare const isString: (label: any) => label is string;
 export declare const handlePixel: (value: number | string) => string;
+export declare function getElementOffset(elem: HTMLElement): {
+    top: number;
+    left: number;
+};