@neatui/css 1.0.2

package/anim/am-view-ae.scss

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

package/anim/am-view-af.scss

@@ -0,0 +1,104 @@
+// 显示动画
+@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;
+  }
+  100% {
+    transform: rotateX(0deg);
+    opacity: 1;
+  }
+}
+
+// 隐藏动画
+@keyframes am-hide-af {
+  0% {
+    transform: rotateX(0deg);
+    opacity: 1;
+  }
+  60% {
+    transform: rotateX(20deg);
+    opacity: 1;
+  }
+  100% {
+    transform: rotateX(-45deg);
+    opacity: 0;
+  }
+}
+
+// 动画时间
+$time: 750ms;
+$delay: 100ms;
+// 引用显示
+%am-show-af {
+  & > * {
+    transform: rotateX(45deg);
+    opacity: 0;
+    animation: am-show-af $time $delay both;
+  }
+}
+
+// 引用隐藏
+%am-hide-af {
+  opacity: 0;
+  transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
+  pointer-events: none;
+  & > * {
+    opacity: 1;
+    animation: am-hide-af ($time + $delay) * (6 * 0.1) both;
+  }
+}
+
+// 传参调用
+@mixin am-view-af($time: 750ms, $delay: 100ms) {
+  perspective: 500;
+  &.show,
+  &[view='2'] {
+    @extend %am-show-af;
+  }
+
+  &.hide,
+  &[view='1'] {
+    @extend %am-hide-af;
+  }
+
+  &.none,
+  &[view='0'] {
+    display: none;
+  }
+}
+
+// 全套引用
+[am-view='af'] {
+  perspective: 500;
+  &.show,
+  &[view='2'] {
+    @extend %am-show-af;
+  }
+
+  &.hide,
+  &[view='1'] {
+    @extend %am-hide-af;
+  }
+
+  &.none,
+  &[view='0'] {
+    display: none;
+  }
+}