@neatui/css 1.0.2

package/anim/am-view-ah.scss

@@ -0,0 +1,122 @@
+// 显示动画
+@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);
+  }
+  100% {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+// 隐藏动画
+@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);
+  }
+}
+
+// 引用显示
+%am-show-ah {
+  opacity: 0;
+  transform: scale3d(3, 3, 1);
+  transform-style: preserve-3d;
+  transform-origin: 50% 50%;
+}
+
+// 引用隐藏
+%am-hide-ah {
+  opacity: 1;
+  transform: scale3d(1, 1, 1);
+  transform-style: preserve-3d;
+}
+
+// 传参调用
+@mixin am-view-ah($time: 450ms, $delay: 100ms) {
+  &.show,
+  &[view='2'] {
+    & > * {
+      @extend %am-show-ah;
+      animation: am-show-ah $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-ah;
+      animation: am-hide-ah $time $delay both;
+    }
+  }
+
+  &.none,
+  &[view='0'] {
+    display: none;
+  }
+}
+
+// 动画时间
+$time: 450ms;
+$delay: 100ms;
+
+// 全套引用
+[am-view='ah'] {
+  &.show,
+  &[view='2'] {
+    & > * {
+      @extend %am-show-ah;
+      animation: am-show-ah $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-ah;
+      animation: am-hide-ah $time $delay both;
+    }
+  }
+
+  &.none,
+  &[view='0'] {
+    display: none;
+  }
+}

package/anim/am-view-ai.scss

@@ -0,0 +1,116 @@
+// 显示动画
+@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);
+  }
+  100% {
+    opacity: 1;
+    transform: skewX(0deg) translate3d(0, 0, 0) scale3d(1, 1, 1);
+  }
+}
+
+// 隐藏动画
+@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);
+  }
+  100% {
+    opacity: 0;
+    transform: skewX(10deg) translate3d(-110%, -5%, 0) scale3d(0.9, 0.9, 1);
+  }
+}
+
+// 引用显示
+%am-show-ai {
+  opacity: 0;
+  transform: scale3d(2, 2, 1) translate3d(0, -30%, 0);
+  transform-style: preserve-3d;
+  transform-origin: 0 100%;
+}
+
+// 引用隐藏
+%am-hide-ai {
+  opacity: 1;
+  transform: skewX(0deg) translate3d(0, 0, 0) scale3d(1, 1, 1);
+  transform-style: preserve-3d;
+  transform-origin: 0 100%;
+}
+
+// 传参调用
+@mixin am-view-ai($time: 500ms, $delay: 100ms) {
+  &.show,
+  &[view='2'] {
+    & > * {
+      @extend %am-show-ai;
+      animation: am-show-ai $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-ai;
+      animation: am-hide-ai $time $delay both;
+    }
+  }
+
+  &.none,
+  &[view='0'] {
+    display: none;
+  }
+}
+
+// 动画时间
+$time: 500ms;
+$delay: 100ms;
+
+// 全套引用
+[am-view='ai'] {
+  &.show,
+  &[view='2'] {
+    & > * {
+      @extend %am-show-ai;
+      animation: am-show-ai $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-ai;
+      animation: am-hide-ai $time $delay both;
+    }
+  }
+
+  &.none,
+  &[view='0'] {
+    display: none;
+  }
+}

package/anim/am-view-aj.scss

@@ -0,0 +1,112 @@
+// 显示动画
+@keyframes am-show-aj {
+  0% {
+    opacity: 0;
+    transform: rotateY(80deg);
+  }
+  40% {
+    transform: rotateY(-20deg);
+  }
+  70% {
+    transform: rotateY(10deg);
+  }
+  90% {
+    transform: rotateY(-5deg);
+  }
+  100% {
+    opacity: 1;
+    transform: rotateY(0deg);
+  }
+}
+
+// 隐藏动画
+@keyframes am-hide-aj {
+  0% {
+    opacity: 1;
+    transform: rotateY(0deg);
+  }
+  50% {
+    opacity: 1;
+    transform: rotateY(-20deg);
+  }
+  100% {
+    opacity: 0;
+    transform: rotateY(80deg);
+  }
+}
+
+// 引用显示
+%am-show-aj {
+  opacity: 0;
+  transform: rotateY(80deg);
+  backface-visibility: visible;
+}
+
+// 引用隐藏
+%am-hide-aj {
+  opacity: 1;
+  transform: rotateY(0deg);
+  backface-visibility: visible;
+}
+
+// 传参调用
+@mixin am-view-aj($time: 350ms, $delay: 100ms) {
+  perspective: 500;
+  &.show,
+  &[view='2'] {
+    & > * {
+      @extend %am-show-aj;
+      animation: am-show-aj $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-aj;
+      animation: am-hide-aj $time $delay both;
+    }
+  }
+
+  &.none,
+  &[view='0'] {
+    display: none;
+  }
+}
+
+// 动画时间
+$time: 350ms;
+$delay: 100ms;
+
+// 全套引用
+[am-view='aj'] {
+  perspective: 500;
+  &.show,
+  &[view='2'] {
+    & > * {
+      @extend %am-show-aj;
+      animation: am-show-aj $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-aj;
+      animation: am-hide-aj $time $delay both;
+    }
+  }
+
+  &.none,
+  &[view='0'] {
+    display: none;
+  }
+}

package/anim/am-view-ak.scss

@@ -0,0 +1,102 @@
+// 显示动画
+@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);
+  }
+  100% {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+}
+
+// 隐藏动画
+@keyframes am-hide-ak {
+  0% {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  40% {
+    transform: rotate3d(0, 0, 1, 2deg);
+  }
+  100% {
+    transform: rotate3d(0, 0, 1, -30deg);
+  }
+}
+
+// 引用显示
+%am-show-ak {
+  transform: rotate3d(0, 0, 1, 30deg);
+  transform-origin: 50% 200%;
+  transform-style: preserve-3d;
+}
+
+// 引用隐藏
+%am-hide-ak {
+  transform: rotate3d(0, 0, 1, 0deg);
+  transform-origin: 50% 200%;
+  transform-style: preserve-3d;
+}
+
+// 传参调用
+@mixin am-view-ak($time: 500ms, $delay: 100ms) {
+  &.show,
+  &[view='2'] {
+    & > * {
+      @extend %am-show-ak;
+      animation: am-show-ak $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-ak;
+      animation: am-hide-ak $time $delay both;
+    }
+  }
+
+  &.none,
+  &[view='0'] {
+    display: none;
+  }
+}
+
+// 动画时间
+$time: 500ms;
+$delay: 100ms;
+
+// 全套引用
+[am-view='ak'] {
+  &.show,
+  &[view='2'] {
+    & > * {
+      @extend %am-show-ak;
+      animation: am-show-ak $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-ak;
+      animation: am-hide-ak $time $delay both;
+    }
+  }
+
+  &.none,
+  &[view='0'] {
+    display: none;
+  }
+}

package/anim/am-view-al.scss

@@ -0,0 +1,98 @@
+// 显示动画
+@keyframes am-show-al {
+  0% {
+    opacity: 0;
+    transform: translate3d(150%, 0, 0) scale3d(1, 1, 1);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
+  }
+}
+
+// 隐藏动画
+@keyframes am-hide-al {
+  0% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform: translate3d(150%, 0, 0) scale3d(1, 1, 1);
+  }
+}
+
+// 引用显示
+%am-show-al {
+  transform: translate3d(0, -150%, 0);
+  opacity: 0;
+  transform-style: preserve-3d;
+  transform-origin: 50% 80%;
+}
+
+// 引用隐藏
+%am-hide-al {
+  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
+  opacity: 0;
+  transform-style: preserve-3d;
+}
+
+// 传参调用
+@mixin am-view-al($time: 450ms, $delay: 100ms) {
+  &.show,
+  &[view='2'] {
+    & > * {
+      @extend %am-show-al;
+      animation: am-show-al $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-al;
+      animation: am-hide-al $time $delay both;
+    }
+  }
+
+  &.none,
+  &[view='0'] {
+    display: none;
+  }
+}
+
+// 动画时间
+$time: 450ms;
+$delay: 100ms;
+
+// 全套引用
+[am-view='al'] {
+  &.show,
+  &[view='2'] {
+    & > * {
+      @extend %am-show-al;
+      animation: am-show-al $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-al;
+      animation: am-hide-al $time $delay both;
+    }
+  }
+
+  &.none,
+  &[view='0'] {
+    display: none;
+  }
+}

package/anim/am-view-am.scss

@@ -0,0 +1,97 @@
+// 显示动画
+@keyframes am-show-am {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0) scale3d(1, 1, 1);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0%, 0) scale3d(1, 1, 1);
+  }
+}
+
+// 隐藏动画
+@keyframes am-hide-am {
+  0% {
+    opacity: 1;
+    transform: translate3d(0, 0%, 0) scale3d(1, 1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0) scale3d(1, 1, 1);
+  }
+}
+
+// 引用显示
+%am-show-am {
+  transform: translate3d(0, -150%, 0);
+  opacity: 0;
+  transform-style: preserve-3d;
+}
+
+// 引用隐藏
+%am-hide-am {
+  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
+  opacity: 0;
+  transform-style: preserve-3d;
+}
+
+// 传参调用
+@mixin am-view-am($time: 450ms, $delay: 100ms) {
+  &.show,
+  &[view='2'] {
+    & > * {
+      @extend %am-show-am;
+      animation: am-show-am $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-am;
+      animation: am-hide-am $time $delay both;
+    }
+  }
+
+  &.none,
+  &[view='0'] {
+    display: none;
+  }
+}
+
+// 动画时间
+$time: 450ms;
+$delay: 100ms;
+
+// 全套引用
+[am-view='am'] {
+  &.show,
+  &[view='2'] {
+    & > * {
+      @extend %am-show-am;
+      animation: am-show-am $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-am;
+      animation: am-hide-am $time $delay both;
+    }
+  }
+
+  &.none,
+  &[view='0'] {
+    display: none;
+  }
+}