@neatui/css 4.5.0 → 4.7.0

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

@@ -1,340 +1,59 @@
-// 显示动画
+@use './am-view-core' as *;
+
 @keyframes am-show-ag {
   0% {
     opacity: 0;
-    -webkit-transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  2.083333% {
-    -webkit-transform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  4.166667% {
-    -webkit-transform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  6.25% {
-    -webkit-transform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  8.333333% {
-    -webkit-transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  10.416667% {
-    -webkit-transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  12.5% {
-    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  14.583333% {
-    -webkit-transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  16.666667% {
-    -webkit-transform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  18.75% {
-    -webkit-transform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  20.833333% {
-    -webkit-transform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  22.916667% {
-    -webkit-transform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  25% {
-    -webkit-transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  27.083333% {
-    -webkit-transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  29.166667% {
-    -webkit-transform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  31.25% {
-    -webkit-transform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  33.333333% {
-    -webkit-transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  35.416667% {
-    -webkit-transform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  37.5% {
-    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  39.583333% {
-    -webkit-transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  41.666667% {
-    -webkit-transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  43.75% {
-    -webkit-transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  45.833333% {
-    -webkit-transform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    transform: scale3d(0.94, 0.94, 1);
   }
-
-  47.916667% {
-    -webkit-transform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  50% {
+  68% {
     opacity: 1;
-    -webkit-transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  52.083333% {
-    -webkit-transform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  54.166667% {
-    -webkit-transform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  56.25% {
-    -webkit-transform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  58.333333% {
-    -webkit-transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  60.416667% {
-    -webkit-transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  62.5% {
-    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    transform: scale3d(1.02, 1.02, 1);
   }
-
-  64.583333% {
-    -webkit-transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  66.666667% {
-    -webkit-transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  68.75% {
-    -webkit-transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  70.833333% {
-    -webkit-transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  72.916667% {
-    -webkit-transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  75% {
-    -webkit-transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  77.083333% {
-    -webkit-transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  79.166667% {
-    -webkit-transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  81.25% {
-    -webkit-transform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  83.333333% {
-    -webkit-transform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  85.416667% {
-    -webkit-transform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  87.5% {
-    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  89.583333% {
-    -webkit-transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  91.666667% {
-    -webkit-transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  93.75% {
-    -webkit-transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  95.833333% {
-    -webkit-transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
-  97.916667% {
-    -webkit-transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-
   100% {
     opacity: 1;
-    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    transform: scale3d(1, 1, 1);
   }
 }
 
-// 隐藏动画
 @keyframes am-hide-ag {
   0% {
-    transform: scale(1, 1);
-    opacity: 1;
-  }
-  30% {
-    transform: scale(0.95, 1.05);
-    opacity: 1;
-  }
-  50% {
-    transform: scale(1.03, 0.95);
     opacity: 1;
+    transform: scale3d(1, 1, 1);
   }
   100% {
-    transform: scale(0.3, 0.3);
     opacity: 0;
+    transform: scale3d(0.96, 0.96, 1);
   }
 }
 
-// 引用显示
 %am-show-ag {
-  transform: scale(0.7, 0.7);
   opacity: 0;
-  transform-style: preserve-3d;
+  transform: scale3d(0.94, 0.94, 1);
 }
 
-// 引用隐藏
 %am-hide-ag {
-  transform: scale(1, 1);
   opacity: 1;
-  transform-style: preserve-3d;
+  transform: scale3d(1, 1, 1);
 }
 
-// 传参调用
 @mixin am-view-ag() {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-ag;
-      animation: am-show-ag 550ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
-    opacity: 0;
-    transition: (550ms + 100ms) * (4 * 0.1) (550ms + 100ms) * (6 * 0.1);
-    pointer-events: none;
-
     & > * {
       @extend %am-hide-ag;
-      animation: am-hide-ag 550ms 100ms both;
     }
   }
 
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-bind(am-show-ag, am-hide-ag, 400ms, 280ms);
 }
 
-// 全套引用
 [am-view='ag'] {
-  &.show,
-  &[view='2'] {
-    & > * {
-      @extend %am-show-ag;
-      animation: am-show-ag 550ms 100ms both;
-    }
-  }
-
-  &.hide,
-  &[view='1'] {
-    opacity: 0;
-    transition: (550ms + 100ms) * (4 * 0.1) (550ms + 100ms) * (6 * 0.1);
-    pointer-events: none;
-
-    & > * {
-      @extend %am-hide-ag;
-      animation: am-hide-ag 550ms 100ms both;
-    }
-  }
-
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-ag();
 }

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

@@ -1,28 +1,9 @@
-// 显示动画
+@use './am-view-core' as *;
+
 @keyframes am-show-ah {
   0% {
     opacity: 0;
-    transform: scale3d(3, 3, 1);
-  }
-  50% {
-    opacity: 1;
-    transform: scale3d(0.9, 0.9, 1);
-  }
-  60% {
-    opacity: 1;
-    transform: scale3d(1.05, 1.05, 1);
-  }
-  70% {
-    opacity: 1;
-    transform: scale3d(0.95, 0.95, 1);
-  }
-  80% {
-    opacity: 1;
-    transform: scale3d(1.02, 1.02, 1);
-  }
-  90% {
-    opacity: 1;
-    transform: scale3d(0.98, 0.98, 1);
+    transform: scale3d(1.1, 1.1, 1);
   }
   100% {
     opacity: 1;
@@ -30,89 +11,45 @@
   }
 }
 
-// 隐藏动画
 @keyframes am-hide-ah {
   0% {
     opacity: 1;
     transform: scale3d(1, 1, 1);
   }
-  60% {
-    opacity: 1;
-    transform: scale3d(0.8, 0.8, 1);
-  }
   100% {
     opacity: 0;
-    transform: scale3d(2, 2, 1);
+    transform: scale3d(1.08, 1.08, 1);
   }
 }
 
-// 引用显示
 %am-show-ah {
   opacity: 0;
-  transform: scale3d(3, 3, 1);
-  transform-style: preserve-3d;
-  transform-origin: 50% 50%;
+  transform: scale3d(1.1, 1.1, 1);
 }
 
-// 引用隐藏
 %am-hide-ah {
   opacity: 1;
   transform: scale3d(1, 1, 1);
-  transform-style: preserve-3d;
 }
 
-// 传参调用
 @mixin am-view-ah() {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-ah;
-      animation: am-show-ah 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-ah;
-      animation: am-hide-ah 450ms 100ms both;
     }
   }
 
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-bind(am-show-ah, am-hide-ah);
 }
 
-// 全套引用
 [am-view='ah'] {
-  &.show,
-  &[view='2'] {
-    & > * {
-      @extend %am-show-ah;
-      animation: am-show-ah 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-ah;
-      animation: am-hide-ah 450ms 100ms both;
-    }
-  }
-
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-ah();
 }

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

@@ -1,112 +1,55 @@
-// 显示动画
+@use './am-view-core' as *;
+
 @keyframes am-show-ai {
   0% {
     opacity: 0;
-    transform: skewX(0deg) translate3d(100%, 0, 0) scale3d(1, 1, 1);
-  }
-  25% {
-    opacity: 1;
-    transform: skewX(0deg) translate3d(0, 0, 0) scale3d(0.97, 1, 1);
-  }
-  50% {
-    opacity: 1;
-    transform: skewX(5deg) translate3d(0, 0, 0) scale3d(0.95, 1, 1);
-  }
-  75% {
-    opacity: 1;
-    transform: skewX(-3deg) translate3d(0, 0, 0) scale3d(0.98, 1, 1);
+    transform: translate3d(32px, 0, 0) skewX(3deg);
   }
   100% {
     opacity: 1;
-    transform: skewX(0deg) translate3d(0, 0, 0) scale3d(1, 1, 1);
+    transform: translate3d(0, 0, 0) skewX(0deg);
   }
 }
 
-// 隐藏动画
 @keyframes am-hide-ai {
   0% {
     opacity: 1;
-    transform: skewX(0deg) translate3d(0, 0, 0) scale3d(1, 1, 1);
-  }
-  40%,
-  50% {
-    opacity: 1;
-    transform: skewX(-5deg) translate3d(3%, 0, 0) scale3d(0.98, 1, 1);
+    transform: translate3d(0, 0, 0) skewX(0deg);
   }
   100% {
     opacity: 0;
-    transform: skewX(10deg) translate3d(-110%, -5%, 0) scale3d(0.9, 0.9, 1);
+    transform: translate3d(-28px, 0, 0) skewX(-3deg);
   }
 }
 
-// 引用显示
 %am-show-ai {
   opacity: 0;
-  transform: scale3d(2, 2, 1) translate3d(0, -30%, 0);
-  transform-style: preserve-3d;
-  transform-origin: 0 100%;
+  transform: translate3d(32px, 0, 0) skewX(3deg);
 }
 
-// 引用隐藏
 %am-hide-ai {
   opacity: 1;
-  transform: skewX(0deg) translate3d(0, 0, 0) scale3d(1, 1, 1);
-  transform-style: preserve-3d;
-  transform-origin: 0 100%;
+  transform: translate3d(0, 0, 0) skewX(0deg);
 }
 
-// 传参调用
 @mixin am-view-ai() {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-ai;
-      animation: am-show-ai 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-ai;
-      animation: am-hide-ai 500ms 100ms both;
     }
   }
 
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-bind(am-show-ai, am-hide-ai);
 }
 
-// 全套引用
 [am-view='ai'] {
-  &.show,
-  &[view='2'] {
-    & > * {
-      @extend %am-show-ai;
-      animation: am-show-ai 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-ai;
-      animation: am-hide-ai 500ms 100ms both;
-    }
-  }
-
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-ai();
 }

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

@@ -1,17 +1,9 @@
-// 显示动画
+@use './am-view-core' as *;
+
 @keyframes am-show-aj {
   0% {
     opacity: 0;
-    transform: rotateY(80deg);
-  }
-  40% {
-    transform: rotateY(-20deg);
-  }
-  70% {
-    transform: rotateY(10deg);
-  }
-  90% {
-    transform: rotateY(-5deg);
+    transform: rotateY(16deg);
   }
   100% {
     opacity: 1;
@@ -19,90 +11,47 @@
   }
 }
 
-// 隐藏动画
 @keyframes am-hide-aj {
   0% {
     opacity: 1;
     transform: rotateY(0deg);
   }
-  50% {
-    opacity: 1;
-    transform: rotateY(-20deg);
-  }
   100% {
     opacity: 0;
-    transform: rotateY(80deg);
+    transform: rotateY(-14deg);
   }
 }
 
-// 引用显示
 %am-show-aj {
   opacity: 0;
-  transform: rotateY(80deg);
-  backface-visibility: visible;
+  transform: rotateY(16deg);
 }
 
-// 引用隐藏
 %am-hide-aj {
   opacity: 1;
   transform: rotateY(0deg);
-  backface-visibility: visible;
 }
 
-// 传参调用
 @mixin am-view-aj() {
-  perspective: 500;
+  perspective: 800px;
+
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-aj;
-      animation: am-show-aj 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-aj;
-      animation: am-hide-aj 350ms 100ms both;
     }
   }
 
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-bind(am-show-aj, am-hide-aj, 420ms, 300ms);
 }
 
-// 全套引用
 [am-view='aj'] {
-  perspective: 500;
-  &.show,
-  &[view='2'] {
-    & > * {
-      @extend %am-show-aj;
-      animation: am-show-aj 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-aj;
-      animation: am-hide-aj 350ms 100ms both;
-    }
-  }
-
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-aj();
 }