@neatui/css 1.0.2

package/anim/am-view-an.scss

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

package/anim/am-view-ao.scss

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

package/anim/am-view-ap.scss

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

package/anim/am-view-aq.scss

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

package/anim/am-view-ar.scss

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

package/anim/am-view-as.scss

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