@neatui/css 4.5.0 → 4.7.0

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

@@ -1,4 +1,5 @@
-// 显示动画
+@use './am-view-core' as *;
+
 @keyframes am-show-aa {
   0% {
     opacity: 0;
@@ -8,7 +9,6 @@
   }
 }
 
-// 隐藏动画
 @keyframes am-hide-aa {
   0% {
     opacity: 1;
@@ -18,70 +18,48 @@
   }
 }
 
-// 引用显示
 %am-show-aa {
   opacity: 0;
-  transform-style: preserve-3d;
 }
 
-// 引用隐藏
 %am-hide-aa {
   opacity: 1;
-  transform-style: preserve-3d;
 }
 
-// 传参调用
 @mixin am-view-aa() {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-aa;
-      animation: am-show-aa 350ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
-    opacity: 0;
-    transition: 350ms 100ms;
-    pointer-events: none;
-
     & > * {
       @extend %am-hide-aa;
-      animation: am-hide-aa 350ms 100ms both;
     }
   }
 
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-bind(am-show-aa, am-hide-aa, 400ms, $am-hide-time, $am-show-ease, $am-hide-ease);
 }
 
-// 全套引用
 [am-view='aa'] {
-  &.show,
-  &[view='2'] {
-    & > * {
-      @extend %am-show-aa;
-      animation: am-show-aa 350ms 100ms both;
-    }
-  }
+  @include am-view-aa();
+}
 
-  &.hide,
-  &[view='1'] {
-    opacity: 0;
-    transition: 350ms 100ms;
-    pointer-events: none;
+.fekit-layer[am-view='aa'][view='2']::before {
+  animation-duration: 200ms;
+}
 
-    & > * {
-      @extend %am-hide-aa;
-      animation: am-hide-aa 350ms 100ms both;
-    }
-  }
+.fekit-layer[am-view='aa'][view='1']::before {
+  animation-duration: 180ms;
+}
 
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+:has(> .fekit-layer[am-view='aa'][view='2']) > .fekit-layer-dark[view='2'] {
+  animation-duration: 200ms;
+}
+
+:has(> .fekit-layer[am-view='aa'][view='1']) > .fekit-layer-dark[view='1'] {
+  animation-duration: 180ms;
 }

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

@@ -1,11 +1,12 @@
-// 显示动画
+@use './am-view-core' as *;
+
 @keyframes am-show-ab {
   0% {
-    transform: scale3d(0.8, 0.8, 1);
+    transform: scale3d(0.91, 0.91, 1);
     opacity: 0;
   }
   70% {
-    transform: scale3d(1.02, 1.02, 1);
+    transform: scale3d(1.008, 1.008, 1);
     opacity: 1;
   }
   100% {
@@ -14,90 +15,49 @@
   }
 }
 
-// 隐藏动画
 @keyframes am-hide-ab {
   0% {
     transform: scale3d(1, 1, 1);
+    opacity: 1;
   }
   40%,
   50% {
-    transform: scale3d(1.05, 1.05, 1);
-  }
-  70% {
-    opacity: 1;
+    transform: scale3d(1.02, 1.02, 1);
   }
   100% {
-    transform: scale3d(0.8, 0.8, 1);
+    transform: scale3d(0.91, 0.91, 1);
     opacity: 0;
   }
 }
 
-// 引用显示
 %am-show-ab {
-  transform: scale3d(0.8, 0.8, 1);
+  transform: scale3d(0.91, 0.91, 1);
   opacity: 0;
-  transform-style: preserve-3d;
 }
 
-// 引用隐藏
 %am-hide-ab {
   transform: scale3d(1, 1, 1);
   opacity: 1;
-  transform-style: preserve-3d;
 }
 
-// 传参调用
 @mixin am-view-ab() {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-ab;
-      animation: am-show-ab 350ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
-    opacity: 0;
-    transition: (350ms + 100ms) * (4 * 0.1) (350ms + 100ms) * (6 * 0.1);
-    pointer-events: none;
-
     & > * {
       @extend %am-hide-ab;
-      animation: am-hide-ab 350ms 100ms both;
     }
   }
 
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-bind(am-show-ab, am-hide-ab, 350ms, $am-hide-time, ease, $am-hide-ease);
 }
 
-// 全套引用
 [am-view='ab'] {
-  &.show,
-  &[view='2'] {
-    & > * {
-      @extend %am-show-ab;
-      animation: am-show-ab 350ms 100ms both;
-    }
-  }
-
-  &.hide,
-  &[view='1'] {
-    opacity: 0;
-    transition: (350ms + 100ms) * (4 * 0.1) (350ms + 100ms) * (6 * 0.1);
-    pointer-events: none;
-
-    & > * {
-      @extend %am-hide-ab;
-      animation: am-hide-ab 350ms 100ms both;
-    }
-  }
-
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-ab();
 }

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

@@ -1,114 +1,75 @@
-// 显示动画
+@use './am-view-core' as *;
+
 @keyframes am-show-ac {
   0% {
     opacity: 0;
-    transform: translate3d(0, -100%, 0) scale3d(1, 1, 1);
-  }
-  55% {
-    opacity: 1;
-    transform: translate3d(0, 1.5%, 0) scale3d(1, 1, 1);
-  }
-  70% {
-    opacity: 1;
-    transform: translate3d(0, -1%, 0) scale3d(1.02, 0.95, 1);
+    transform: translate3d(0, -32px, 0);
   }
-  85% {
+  40% {
     opacity: 1;
-    transform: translate3d(0, 0.5%, 0) scale3d(1, 1, 1);
+    transform: translate3d(0, 5px, 0);
   }
   100% {
     opacity: 1;
-    transform: translate3d(0, 0%, 0) scale3d(1, 1, 1);
+    transform: translate3d(0, 0, 0);
   }
 }
 
-// 隐藏动画
 @keyframes am-hide-ac {
   0% {
     opacity: 1;
-    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-  }
-  60% {
-    opacity: 1;
-    transform: translate3d(0, -10%, 0) scale3d(1, 0.95, 1);
+    transform: translate3d(0, 0, 0);
   }
   100% {
     opacity: 0;
-    transform: translate3d(0, 100%, 0) scale3d(1, 1, 1);
+    transform: translate3d(0, 24px, 0);
   }
 }
 
-// 引用显示
 %am-show-ac {
-  transform: translate3d(0, -150%, 0);
   opacity: 0;
-  transform-style: preserve-3d;
-  transform-origin: 50% 80%;
+  transform: translate3d(0, -32px, 0);
 }
 
-// 引用隐藏
 %am-hide-ac {
-  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-ac($time: 450ms, $delay: 100ms) {
+@mixin am-view-ac($time: 460ms, $delay: 0ms) {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-ac;
-      animation: am-show-ac $time $delay both;
     }
   }
 
   &.hide,
   &[view='1'] {
-    opacity: 0;
-    transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
-    pointer-events: none;
-
     & > * {
       @extend %am-hide-ac;
-      animation: am-hide-ac $time $delay both;
     }
   }
 
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-bind(am-show-ac, am-hide-ac, $time, $am-hide-time, $am-show-ease, $am-hide-ease);
 }
 
-// 动画时间
-$time: 450ms;
-$delay: 100ms;
-
-// 全套引用
 [am-view='ac'] {
-  &.show,
-  &[view='2'] {
-    & > * {
-      @extend %am-show-ac;
-      animation: am-show-ac $time $delay both;
-    }
-  }
+  @include am-view-ac();
+}
 
-  &.hide,
-  &[view='1'] {
-    opacity: 0;
-    transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
-    pointer-events: none;
+.fekit-layer[am-view='ac'][view='2']::before {
+  animation-duration: 200ms;
+}
 
-    & > * {
-      @extend %am-hide-ac;
-      animation: am-hide-ac $time $delay both;
-    }
-  }
+.fekit-layer[am-view='ac'][view='1']::before {
+  animation-duration: 180ms;
+}
 
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+:has(> .fekit-layer[am-view='ac'][view='2']) > .fekit-layer-dark[view='2'] {
+  animation-duration: 200ms;
+}
+
+:has(> .fekit-layer[am-view='ac'][view='1']) > .fekit-layer-dark[view='1'] {
+  animation-duration: 180ms;
 }

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

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

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

@@ -1,105 +1,55 @@
-// 显示动画
+@use './am-view-core' as *;
+
 @keyframes am-show-ae {
   0% {
-    transform: scale3d(0.8, 0.8, 1) translate3d(100%, 0, 0);
     opacity: 0;
-  }
-  45% {
-    transform: scale3d(0.8, 0.8, 1) translate3d(0, 0, 0);
-    opacity: 0.85;
-  }
-  50% {
-    transform: scale3d(0.8, 0.8, 1) translate3d(0, 0, 0);
-    opacity: 1;
+    transform: translate3d(28px, 0, 0) scale3d(0.96, 0.96, 1);
   }
   100% {
-    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
     opacity: 1;
+    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
   }
 }
 
-// 隐藏动画
 @keyframes am-hide-ae {
   0% {
-    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
     opacity: 1;
-  }
-  50% {
-    transform: scale3d(0.8, 0.8, 1) translate3d(-1%, 0, 0);
-    opacity: 0.85;
+    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
   }
   100% {
-    transform: scale3d(0.8, 0.8, 1) translate3d(-100%, 0, 0);
     opacity: 0;
+    transform: translate3d(-24px, 0, 0) scale3d(0.96, 0.96, 1);
   }
 }
 
-// 引用显示
 %am-show-ae {
-  transform: scale3d(0.8, 0.8, 1) translate3d(100%, 0, 0);
   opacity: 0;
-  transform-style: preserve-3d;
+  transform: translate3d(28px, 0, 0) scale3d(0.96, 0.96, 1);
 }
 
-// 引用隐藏
 %am-hide-ae {
-  transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
   opacity: 1;
-  transform-style: preserve-3d;
+  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
 }
 
-// 传参调用
 @mixin am-view-ae() {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-ae;
-      animation: am-show-ae 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-ae;
-      animation: am-hide-ae 500ms 100ms both;
     }
   }
 
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-bind(am-show-ae, am-hide-ae);
 }
 
-// 全套引用
 [am-view='ae'] {
-  &.show,
-  &[view='2'] {
-    & > * {
-      @extend %am-show-ae;
-      animation: am-show-ae 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-ae;
-      animation: am-hide-ae 500ms 100ms both;
-    }
-  }
-
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-ae();
 }

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

@@ -1,100 +1,59 @@
-// 显示动画
+@use './am-view-core' as *;
+
 @keyframes am-show-af {
   0% {
-    transform: rotateX(45deg);
     opacity: 0;
-  }
-  20% {
-    transform: rotateX(-7deg);
-    opacity: 1;
-  }
-  40% {
-    transform: rotateX(5deg);
-    opacity: 1;
-  }
-  60% {
-    transform: rotateX(-3deg);
-    opacity: 1;
-  }
-  80% {
-    transform: rotateX(1.5deg);
-    opacity: 1;
+    transform: rotateX(14deg);
   }
   100% {
-    transform: rotateX(0deg);
     opacity: 1;
+    transform: rotateX(0deg);
   }
 }
 
-// 隐藏动画
 @keyframes am-hide-af {
   0% {
-    transform: rotateX(0deg);
-    opacity: 1;
-  }
-  60% {
-    transform: rotateX(20deg);
     opacity: 1;
+    transform: rotateX(0deg);
   }
   100% {
-    transform: rotateX(-45deg);
     opacity: 0;
+    transform: rotateX(-14deg);
   }
 }
-// 引用显示
+
 %am-show-af {
-  & > * {
-    transform: rotateX(45deg);
-    opacity: 0;
-    animation: am-show-af 750ms 100ms both;
-  }
+  opacity: 0;
+  transform: rotateX(14deg);
 }
 
-// 引用隐藏
 %am-hide-af {
-  opacity: 0;
-  transition: (750ms + 100ms) * (4 * 0.1) (750ms + 100ms) * (6 * 0.1);
-  pointer-events: none;
-  & > * {
-    opacity: 1;
-    animation: am-hide-af (750ms + 100ms) * (6 * 0.1) both;
-  }
+  opacity: 1;
+  transform: rotateX(0deg);
 }
 
-// 传参调用
 @mixin am-view-af() {
-  perspective: 500;
+  perspective: 800px;
+
   &.show,
   &[view='2'] {
-    @extend %am-show-af;
+    & > * {
+      @extend %am-show-af;
+      transform-origin: 50% 50%;
+    }
   }
 
   &.hide,
   &[view='1'] {
-    @extend %am-hide-af;
+    & > * {
+      @extend %am-hide-af;
+      transform-origin: 50% 50%;
+    }
   }
 
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-bind(am-show-af, am-hide-af, 420ms, 300ms);
 }
 
-// 全套引用
 [am-view='af'] {
-  perspective: 500;
-  &.show,
-  &[view='2'] {
-    @extend %am-show-af;
-  }
-
-  &.hide,
-  &[view='1'] {
-    @extend %am-hide-af;
-  }
-
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-af();
 }