@neatui/css 4.5.0 → 4.7.0

package/components/anim/am-view-ak.scss

@@ -1,98 +1,57 @@
-// 显示动画
+@use './am-view-core' as *;
+
 @keyframes am-show-ak {
   0% {
-    transform: rotate3d(0, 0, 1, 30deg);
-  }
-  60% {
-    transform: rotate3d(0, 0, 1, -1deg);
-  }
-  70% {
-    transform: rotate3d(0, 0, 1, -1deg);
+    opacity: 0;
+    transform: rotate(12deg);
   }
   100% {
-    transform: rotate3d(0, 0, 1, 0deg);
+    opacity: 1;
+    transform: rotate(0deg);
   }
 }
 
-// 隐藏动画
 @keyframes am-hide-ak {
   0% {
-    transform: rotate3d(0, 0, 1, 0deg);
-  }
-  40% {
-    transform: rotate3d(0, 0, 1, 2deg);
+    opacity: 1;
+    transform: rotate(0deg);
   }
   100% {
-    transform: rotate3d(0, 0, 1, -30deg);
+    opacity: 0;
+    transform: rotate(-12deg);
   }
 }
 
-// 引用显示
 %am-show-ak {
-  transform: rotate3d(0, 0, 1, 30deg);
-  transform-origin: 50% 200%;
-  transform-style: preserve-3d;
+  opacity: 0;
+  transform: rotate(12deg);
+  transform-origin: 50% 140%;
 }
 
-// 引用隐藏
 %am-hide-ak {
-  transform: rotate3d(0, 0, 1, 0deg);
-  transform-origin: 50% 200%;
-  transform-style: preserve-3d;
+  opacity: 1;
+  transform: rotate(0deg);
+  transform-origin: 50% 140%;
 }
 
-// 传参调用
 @mixin am-view-ak() {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-ak;
-      animation: am-show-ak 500ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
-    opacity: 0;
-    transition: (500ms + 100ms) * (4 * 0.1) (500ms + 100ms) * (6 * 0.1);
-    pointer-events: none;
-
     & > * {
       @extend %am-hide-ak;
-      animation: am-hide-ak 500ms 100ms both;
     }
   }
 
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-bind(am-show-ak, am-hide-ak, 400ms, 300ms);
 }
 
-// 全套引用
 [am-view='ak'] {
-  &.show,
-  &[view='2'] {
-    & > * {
-      @extend %am-show-ak;
-      animation: am-show-ak 500ms 100ms both;
-    }
-  }
-
-  &.hide,
-  &[view='1'] {
-    opacity: 0;
-    transition: (500ms + 100ms) * (4 * 0.1) (500ms + 100ms) * (6 * 0.1);
-    pointer-events: none;
-
-    & > * {
-      @extend %am-hide-ak;
-      animation: am-hide-ak 500ms 100ms both;
-    }
-  }
-
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-ak();
 }

package/components/anim/am-view-al.scss

@@ -1,94 +1,55 @@
-// 显示动画
+@use './am-view-core' as *;
+
 @keyframes am-show-al {
   0% {
     opacity: 0;
-    transform: translate3d(150%, 0, 0) scale3d(1, 1, 1);
+    transform: translate3d(40px, 0, 0);
   }
   100% {
     opacity: 1;
-    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
+    transform: translate3d(0, 0, 0);
   }
 }
 
-// 隐藏动画
 @keyframes am-hide-al {
   0% {
     opacity: 1;
-    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
+    transform: translate3d(0, 0, 0);
   }
   100% {
     opacity: 0;
-    transform: translate3d(150%, 0, 0) scale3d(1, 1, 1);
+    transform: translate3d(40px, 0, 0);
   }
 }
 
-// 引用显示
 %am-show-al {
-  transform: translate3d(0, -150%, 0);
   opacity: 0;
-  transform-style: preserve-3d;
-  transform-origin: 50% 80%;
+  transform: translate3d(40px, 0, 0);
 }
 
-// 引用隐藏
 %am-hide-al {
-  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-  opacity: 0;
-  transform-style: preserve-3d;
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
 }
 
-// 传参调用
 @mixin am-view-al() {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-al;
-      animation: am-show-al 450ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
-    opacity: 0;
-    transition: (450ms + 100ms) * (4 * 0.1) (450ms + 100ms) * (6 * 0.1);
-    pointer-events: none;
-
     & > * {
       @extend %am-hide-al;
-      animation: am-hide-al 450ms 100ms both;
     }
   }
 
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-bind(am-show-al, am-hide-al);
 }
 
-// 全套引用
 [am-view='al'] {
-  &.show,
-  &[view='2'] {
-    & > * {
-      @extend %am-show-al;
-      animation: am-show-al 450ms 100ms both;
-    }
-  }
-
-  &.hide,
-  &[view='1'] {
-    opacity: 0;
-    transition: (450ms + 100ms) * (4 * 0.1) (450ms + 100ms) * (6 * 0.1);
-    pointer-events: none;
-
-    & > * {
-      @extend %am-hide-al;
-      animation: am-hide-al 450ms 100ms both;
-    }
-  }
-
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-al();
 }

package/components/anim/am-view-am.scss

@@ -1,93 +1,55 @@
-// 显示动画
+@use './am-view-core' as *;
+
 @keyframes am-show-am {
   0% {
     opacity: 0;
-    transform: translate3d(0, 100%, 0) scale3d(1, 1, 1);
+    transform: translate3d(0, 40px, 0);
   }
   100% {
     opacity: 1;
-    transform: translate3d(0, 0%, 0) scale3d(1, 1, 1);
+    transform: translate3d(0, 0, 0);
   }
 }
 
-// 隐藏动画
 @keyframes am-hide-am {
   0% {
     opacity: 1;
-    transform: translate3d(0, 0%, 0) scale3d(1, 1, 1);
+    transform: translate3d(0, 0, 0);
   }
   100% {
     opacity: 0;
-    transform: translate3d(0, 100%, 0) scale3d(1, 1, 1);
+    transform: translate3d(0, 40px, 0);
   }
 }
 
-// 引用显示
 %am-show-am {
-  transform: translate3d(0, -150%, 0);
   opacity: 0;
-  transform-style: preserve-3d;
+  transform: translate3d(0, 40px, 0);
 }
 
-// 引用隐藏
 %am-hide-am {
-  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-  opacity: 0;
-  transform-style: preserve-3d;
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
 }
 
-// 传参调用
 @mixin am-view-am() {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-am;
-      animation: am-show-am 450ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
-    opacity: 0;
-    transition: (450ms + 100ms) * (4 * 0.1) (450ms + 100ms) * (6 * 0.1);
-    pointer-events: none;
-
     & > * {
       @extend %am-hide-am;
-      animation: am-hide-am 450ms 100ms both;
     }
   }
 
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-bind(am-show-am, am-hide-am);
 }
 
-// 全套引用
 [am-view='am'] {
-  &.show,
-  &[view='2'] {
-    & > * {
-      @extend %am-show-am;
-      animation: am-show-am 450ms 100ms both;
-    }
-  }
-
-  &.hide,
-  &[view='1'] {
-    opacity: 0;
-    transition: (450ms + 100ms) * (4 * 0.1) (450ms + 100ms) * (6 * 0.1);
-    pointer-events: none;
-
-    & > * {
-      @extend %am-hide-am;
-      animation: am-hide-am 450ms 100ms both;
-    }
-  }
-
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-am();
 }

package/components/anim/am-view-an.scss

@@ -1,105 +1,55 @@
-// 显示动画
+@use './am-view-core' as *;
+
 @keyframes am-show-an {
   0% {
-    transform: scale(0.8, 0.8) translateY(-100%);
-    opacity: 0.8;
-  }
-  45% {
-    transform: scale(0.8, 0.8) translateY(0);
-    opacity: 0.8;
-  }
-  50% {
-    transform: scale(0.8, 0.8) translateY(0);
-    opacity: 1;
+    opacity: 0;
+    transform: translate3d(0, -24px, 0) scale3d(0.96, 0.96, 1);
   }
   100% {
-    transform: scale(1, 1) translateY(0);
     opacity: 1;
+    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
   }
 }
 
-// 隐藏动画
 @keyframes am-hide-an {
   0% {
-    transform: scale(1, 1) translateY(0);
     opacity: 1;
-  }
-  50% {
-    transform: scale(0.8, 0.8) translateY(0);
-    opacity: 0.8;
+    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
   }
   100% {
-    transform: scale(0.8, 0.8) translateY(100%);
     opacity: 0;
+    transform: translate3d(0, 24px, 0) scale3d(0.96, 0.96, 1);
   }
 }
 
-// 引用显示
 %am-show-an {
-  transform: scale(0.8, 0.8) translateY(100%);
-  opacity: 0.8;
-  transform-style: preserve-3d;
+  opacity: 0;
+  transform: translate3d(0, -24px, 0) scale3d(0.96, 0.96, 1);
 }
 
-// 引用隐藏
 %am-hide-an {
-  transform: scale(1, 1) translateY(0);
   opacity: 1;
-  transform-style: preserve-3d;
+  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
 }
 
-// 传参调用
 @mixin am-view-an() {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-an;
-      animation: am-show-an 500ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
-    opacity: 0;
-    transition: (500ms + 100ms) * (4 * 0.1) (500ms + 100ms) * (6 * 0.1);
-    pointer-events: none;
-
     & > * {
       @extend %am-hide-an;
-      animation: am-hide-an 500ms 100ms both;
     }
   }
 
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-bind(am-show-an, am-hide-an);
 }
 
-// 全套引用
 [am-view='an'] {
-  &.show,
-  &[view='2'] {
-    & > * {
-      @extend %am-show-an;
-      animation: am-show-an 500ms 100ms both;
-    }
-  }
-
-  &.hide,
-  &[view='1'] {
-    opacity: 0;
-    transition: (500ms + 100ms) * (4 * 0.1) (500ms + 100ms) * (6 * 0.1);
-    pointer-events: none;
-
-    & > * {
-      @extend %am-hide-an;
-      animation: am-hide-an 500ms 100ms both;
-    }
-  }
-
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-an();
 }

package/components/anim/am-view-ao.scss

@@ -1,119 +1,72 @@
-// 显示动画
+@use './am-view-core' as *;
+
 @keyframes am-show-ao {
   0% {
-    transform: scale3d(1, 1, 1) translateY(100%);
-    opacity: 1;
+    opacity: 0;
+    transform: translate3d(0, 22px, 0);
   }
-  60% {
-    transform: scale3d(1, 1, 1) translateY(-5%);
+  70% {
     opacity: 1;
+    transform: translate3d(0, -3px, 0);
   }
   100% {
-    transform: scale3d(1, 1, 1) translateY(0);
     opacity: 1;
+    transform: translate3d(0, 0, 0);
   }
 }
 
-// 隐藏动画
 @keyframes am-hide-ao {
   0% {
-    transform: scale3d(1, 1, 1) translateY(0);
-    opacity: 1;
-  }
-  40% {
-    transform: scale3d(1, 1, 1) translateY(-5%);
     opacity: 1;
+    transform: translate3d(0, 0, 0);
   }
   100% {
-    transform: scale3d(1, 1, 1) translateY(100%);
     opacity: 0;
+    transform: translate3d(0, 18px, 0);
   }
 }
 
-// 引用显示
 %am-show-ao {
-  transform: scale3d(1, 1, 1) translateY(100%);
-  opacity: 1;
-  transform-style: preserve-3d;
+  opacity: 0;
+  transform: translate3d(0, 22px, 0);
 }
 
-// 传参引用显示
-@mixin am-show-ao() {
-  transform: scale3d(1, 1, 1) translateY(100%);
+%am-hide-ao {
   opacity: 1;
-  transform-style: preserve-3d;
-  animation: am-show-ao 450ms both 0.1s;
+  transform: translate3d(0, 0, 0);
 }
 
-// 引用隐藏
-%am-hide-ao {
-  transform: scale(1, 1) translateY(0);
-  opacity: 1;
-  transform-style: preserve-3d;
-  pointer-events: none;
+@mixin am-show-ao() {
+  opacity: 0;
+  transform: translate3d(0, 22px, 0);
+  animation: am-show-ao $am-show-time $am-show-ease both;
 }
 
-// 传参引用隐藏
 @mixin am-hide-ao() {
-  transform: scale(1, 1) translateY(0);
   opacity: 1;
-  transform-style: preserve-3d;
-  animation: am-hide-ao 450ms both 0.1s;
+  transform: translate3d(0, 0, 0);
+  animation: am-hide-ao $am-hide-time $am-hide-ease both;
   pointer-events: none;
 }
 
-// 传参调用
 @mixin am-view-ao() {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-ao;
-      animation: am-show-ao 450ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
-    opacity: 0;
-    transition: (450ms + 100ms) * (4 * 0.1) (450ms + 100ms) * (6 * 0.1);
-    pointer-events: none;
-
     & > * {
       @extend %am-hide-ao;
-      animation: am-hide-ao 450ms 100ms both;
     }
   }
 
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-bind(am-show-ao, am-hide-ao);
 }
 
-// 全套引用
 [am-view='ao'] {
-  &.show,
-  &[view='2'] {
-    & > * {
-      @extend %am-show-ao;
-      animation: am-show-ao 450ms 100ms both;
-    }
-  }
-
-  &.hide,
-  &[view='1'] {
-    opacity: 0;
-    transition: (450ms + 100ms) * (4 * 0.1) (450ms + 100ms) * (6 * 0.1);
-    pointer-events: none;
-
-    & > * {
-      @extend %am-hide-ao;
-      animation: am-hide-ao 450ms 100ms both;
-    }
-  }
-
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-ao();
 }

package/components/anim/am-view-ap.scss

@@ -1,71 +1,64 @@
-// 显示动画
+@use './am-view-core' as *;
+
 @keyframes am-show-ap {
   0% {
     opacity: 0;
-    transform: translate3d(0, 100%, 0) scale3d(1, 1, 1);
+    transform: translate3d(0, 20%, 0) scale3d(1, 1, 1);
   }
   70% {
     opacity: 1;
-    transform: translate3d(0, 0%, 0) scale3d(1, 1.05, 1);
+    transform: translate3d(0, 0, 0) scale3d(1, 1.025, 1);
   }
   100% {
     opacity: 1;
-    transform: translate3d(0, 0%, 0) scale3d(1, 1, 1);
+    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
   }
 }
 
-// 隐藏动画
 @keyframes am-hide-ap {
   0% {
     opacity: 1;
-    transform: translate3d(0, 0%, 0) scale3d(1, 1, 1);
+    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
   }
   35%,
   40% {
     opacity: 1;
-    transform: translate3d(0, 0%, 0) scale3d(1, 1.05, 1);
+    transform: translate3d(0, 0, 0) scale3d(1, 1.025, 1);
   }
   100% {
     opacity: 0;
-    transform: translate3d(0, 100%, 0) scale3d(1, 1, 1);
+    transform: translate3d(0, 20%, 0) scale3d(1, 1, 1);
   }
 }
 
-// 引用显示
 %am-show-ap {
-  transform: translate3d(0, 100%, 0) scale3d(1, 1, 1);
   opacity: 0;
+  transform: translate3d(0, 20%, 0) scale3d(1, 1, 1);
   transform-origin: 50% 100%;
-  transform-style: preserve-3d;
 }
 
-// 引用隐藏
 %am-hide-ap {
-  transform: translate3d(0, 0%, 0) scale3d(1, 1, 1);
-  opacity: 0;
+  opacity: 1;
+  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
   transform-origin: 50% 100%;
-  transform-style: preserve-3d;
 }
 
-// 传参调用
 @mixin am-view-ap() {
   &.show,
   &[view='2'] {
-    & > * {
+    & > * > * {
       @extend %am-show-ap;
-      animation: am-show-ap 450ms 350ms both;
+      animation: am-show-ap 450ms ease both;
     }
   }
 
   &.hide,
   &[view='1'] {
-    opacity: 0;
-    transition: (450ms + 350ms) * (4 * 0.1) (450ms + 350ms) * (6 * 0.1);
     pointer-events: none;
 
-    & > * {
+    & > * > * {
       @extend %am-hide-ap;
-      animation: am-hide-ap 450ms 350ms both;
+      animation: am-hide-ap $am-hide-time $am-hide-ease both;
     }
   }
 
@@ -75,30 +68,6 @@
   }
 }
 
-// 全套引用
 [am-view='ap'] {
-  &.show,
-  &[view='2'] {
-    & > * {
-      @extend %am-show-ap;
-      animation: am-show-ap 450ms 350ms both;
-    }
-  }
-
-  &.hide,
-  &[view='1'] {
-    opacity: 0;
-    transition: (450ms + 350ms) * (4 * 0.1) (450ms + 350ms) * (6 * 0.1);
-    pointer-events: none;
-
-    & > * {
-      @extend %am-hide-ap;
-      animation: am-hide-ap 450ms 350ms both;
-    }
-  }
-
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-ap();
 }