@neatui/css 1.0.2

package/README.md

@@ -0,0 +1 @@
+# @neatui/css

package/all.scss

@@ -0,0 +1,22 @@
+@import './core/mcui@core.scss';
+@import './anim/mcui@anim.scss';
+@import './btns/mcui@btns.scss';
+@import './card/mcui@card.scss';
+@import './form/mcui@form.scss';
+@import './icon/mcui@icon.scss';
+@import './imgs/mcui@imgs.scss';
+@import './line/mcui@line.scss';
+@import './list/mcui@list.scss';
+@import './load/mcui@load.scss';
+@import './menu/mcui@menu.scss';
+@import './navs/mcui@navs.scss';
+@import './note/mcui@note.scss';
+@import './opts/mcui@opts.scss';
+@import './path/mcui@path.scss';
+@import './side/mcui@side.scss';
+@import './steps/mcui@steps.scss';
+@import './table/mcui@table.scss';
+@import './tabs/mcui@tabs.scss';
+@import './tags/mcui@tags.scss';
+@import './tips/mcui@tips.scss';
+@import './title/mcui@title.scss';

package/anim/am-loading.scss

@@ -0,0 +1,220 @@
+@keyframes am-loading {
+
+  00% {
+    background: radial-gradient(circle at 23%, rgba(051, 181, 229, 0.8) 10%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 77%, rgba(255, 187, 050, 0.8) 10%, transparent 00%);
+  }
+
+  2% {
+    background: radial-gradient(circle at 27%, rgba(051, 181, 229, 0.8) 11%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 73%, rgba(255, 187, 050, 0.8) 11%, transparent 00%);
+  }
+
+  4% {
+    background: radial-gradient(circle at 31%, rgba(051, 181, 229, 0.8) 12%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 69%, rgba(255, 187, 050, 0.8) 12%, transparent 00%);
+  }
+
+  6% {
+    background: radial-gradient(circle at 35%, rgba(051, 181, 229, 0.8) 13%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 65%, rgba(255, 187, 050, 0.8) 13%, transparent 00%);
+  }
+
+  8% {
+    background: radial-gradient(circle at 38%, rgba(051, 181, 229, 0.8) 14%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 62%, rgba(255, 187, 050, 0.8) 14%, transparent 00%);
+  }
+
+  10% {
+    background: radial-gradient(circle at 41%, rgba(051, 181, 229, 0.8) 15%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 59%, rgba(255, 187, 050, 0.8) 15%, transparent 00%);
+  }
+
+  12% {
+    background: radial-gradient(circle at 44%, rgba(051, 181, 229, 0.8) 16%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 56%, rgba(255, 187, 050, 0.8) 16%, transparent 00%);
+  }
+
+  14% {
+    background: radial-gradient(circle at 47%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 53%, rgba(255, 187, 050, 0.8) 17%, transparent 00%);
+  }
+
+  16% {
+    background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%);
+  }
+
+  18% {
+    background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 53%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 47%, rgba(255, 187, 050, 0.8) 17%, transparent 00%);
+  }
+
+  20% {
+    background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 56%, rgba(255, 068, 068, 0.8) 16%, transparent 00%), radial-gradient(circle at 44%, rgba(255, 187, 050, 0.8) 16%, transparent 00%);
+  }
+
+  22% {
+    background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 59%, rgba(255, 068, 068, 0.8) 15%, transparent 00%), radial-gradient(circle at 41%, rgba(255, 187, 050, 0.8) 15%, transparent 00%);
+  }
+
+  24% {
+    background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 62%, rgba(255, 068, 068, 0.8) 14%, transparent 00%), radial-gradient(circle at 38%, rgba(255, 187, 050, 0.8) 14%, transparent 00%);
+  }
+
+  26% {
+    background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 65%, rgba(255, 068, 068, 0.8) 13%, transparent 00%), radial-gradient(circle at 35%, rgba(255, 187, 050, 0.8) 13%, transparent 00%);
+  }
+
+  28% {
+    background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 69%, rgba(255, 068, 068, 0.8) 12%, transparent 00%), radial-gradient(circle at 31%, rgba(255, 187, 050, 0.8) 12%, transparent 00%);
+  }
+
+  30% {
+    background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 73%, rgba(255, 068, 068, 0.8) 11%, transparent 00%), radial-gradient(circle at 27%, rgba(255, 187, 050, 0.8) 11%, transparent 00%);
+  }
+
+  32% {
+    background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 77%, rgba(255, 068, 068, 0.8) 10%, transparent 00%), radial-gradient(circle at 23%, rgba(255, 187, 050, 0.8) 10%, transparent 00%);
+  }
+
+  34% {
+    background: radial-gradient(circle at 23%, rgba(255, 187, 050, 0.8) 10%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 77%, rgba(255, 068, 068, 0.8) 10%, transparent 00%);
+  }
+
+  36% {
+    background: radial-gradient(circle at 27%, rgba(255, 187, 050, 0.8) 11%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 73%, rgba(255, 068, 068, 0.8) 11%, transparent 00%);
+  }
+
+  38% {
+    background: radial-gradient(circle at 31%, rgba(255, 187, 050, 0.8) 12%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 69%, rgba(255, 068, 068, 0.8) 12%, transparent 00%);
+  }
+
+  40% {
+    background: radial-gradient(circle at 35%, rgba(255, 187, 050, 0.8) 13%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 65%, rgba(255, 068, 068, 0.8) 13%, transparent 00%);
+  }
+
+  42% {
+    background: radial-gradient(circle at 38%, rgba(255, 187, 050, 0.8) 14%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 62%, rgba(255, 068, 068, 0.8) 14%, transparent 00%);
+  }
+
+  44% {
+    background: radial-gradient(circle at 41%, rgba(255, 187, 050, 0.8) 15%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 59%, rgba(255, 068, 068, 0.8) 15%, transparent 00%);
+  }
+
+  46% {
+    background: radial-gradient(circle at 44%, rgba(255, 187, 050, 0.8) 16%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 56%, rgba(255, 068, 068, 0.8) 16%, transparent 00%);
+  }
+
+  48% {
+    background: radial-gradient(circle at 47%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 53%, rgba(255, 068, 068, 0.8) 17%, transparent 00%);
+  }
+
+  50% {
+    background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%);
+  }
+
+  52% {
+    background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 53%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 47%, rgba(255, 068, 068, 0.8) 17%, transparent 00%);
+  }
+
+  54% {
+    background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 56%, rgba(051, 181, 229, 0.8) 16%, transparent 00%), radial-gradient(circle at 44%, rgba(255, 068, 068, 0.8) 16%, transparent 00%);
+  }
+
+  56% {
+    background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 59%, rgba(051, 181, 229, 0.8) 15%, transparent 00%), radial-gradient(circle at 41%, rgba(255, 068, 068, 0.8) 15%, transparent 00%);
+  }
+
+  58% {
+    background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 62%, rgba(051, 181, 229, 0.8) 14%, transparent 00%), radial-gradient(circle at 38%, rgba(255, 068, 068, 0.8) 14%, transparent 00%);
+  }
+
+  60% {
+    background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 65%, rgba(051, 181, 229, 0.8) 13%, transparent 00%), radial-gradient(circle at 35%, rgba(255, 068, 068, 0.8) 13%, transparent 00%);
+  }
+
+  62% {
+    background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 69%, rgba(051, 181, 229, 0.8) 12%, transparent 00%), radial-gradient(circle at 31%, rgba(255, 068, 068, 0.8) 12%, transparent 00%);
+  }
+
+  64% {
+    background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 73%, rgba(051, 181, 229, 0.8) 11%, transparent 00%), radial-gradient(circle at 27%, rgba(255, 068, 068, 0.8) 11%, transparent 00%);
+  }
+
+  66% {
+    background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 77%, rgba(051, 181, 229, 0.8) 10%, transparent 00%), radial-gradient(circle at 23%, rgba(255, 068, 068, 0.8) 10%, transparent 00%);
+  }
+
+  68% {
+    background: radial-gradient(circle at 23%, rgba(255, 068, 068, 0.8) 10%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 77%, rgba(051, 181, 229, 0.8) 10%, transparent 00%);
+  }
+
+  70% {
+    background: radial-gradient(circle at 27%, rgba(255, 068, 068, 0.8) 11%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 73%, rgba(051, 181, 229, 0.8) 11%, transparent 00%);
+  }
+
+  72% {
+    background: radial-gradient(circle at 31%, rgba(255, 068, 068, 0.8) 12%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 69%, rgba(051, 181, 229, 0.8) 12%, transparent 00%);
+  }
+
+  74% {
+    background: radial-gradient(circle at 35%, rgba(255, 068, 068, 0.8) 13%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 65%, rgba(051, 181, 229, 0.8) 13%, transparent 00%);
+  }
+
+  76% {
+    background: radial-gradient(circle at 38%, rgba(255, 068, 068, 0.8) 14%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 62%, rgba(051, 181, 229, 0.8) 14%, transparent 00%);
+  }
+
+  78% {
+    background: radial-gradient(circle at 41%, rgba(255, 068, 068, 0.8) 15%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 59%, rgba(051, 181, 229, 0.8) 15%, transparent 00%);
+  }
+
+  80% {
+    background: radial-gradient(circle at 44%, rgba(255, 068, 068, 0.8) 16%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 56%, rgba(051, 181, 229, 0.8) 16%, transparent 00%);
+  }
+
+  82% {
+    background: radial-gradient(circle at 47%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 53%, rgba(051, 181, 229, 0.8) 17%, transparent 00%);
+  }
+
+  84% {
+    background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%);
+  }
+
+  86% {
+    background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 53%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 47%, rgba(051, 181, 229, 0.8) 17%, transparent 00%);
+  }
+
+  88% {
+    background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 56%, rgba(255, 187, 050, 0.8) 16%, transparent 00%), radial-gradient(circle at 44%, rgba(051, 181, 229, 0.8) 16%, transparent 00%);
+  }
+
+  90% {
+    background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 59%, rgba(255, 187, 050, 0.8) 15%, transparent 00%), radial-gradient(circle at 41%, rgba(051, 181, 229, 0.8) 15%, transparent 00%);
+  }
+
+  92% {
+    background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 62%, rgba(255, 187, 050, 0.8) 14%, transparent 00%), radial-gradient(circle at 38%, rgba(051, 181, 229, 0.8) 14%, transparent 00%);
+  }
+
+  94% {
+    background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 65%, rgba(255, 187, 050, 0.8) 13%, transparent 00%), radial-gradient(circle at 35%, rgba(051, 181, 229, 0.8) 13%, transparent 00%);
+  }
+
+  96% {
+    background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 69%, rgba(255, 187, 050, 0.8) 12%, transparent 00%), radial-gradient(circle at 31%, rgba(051, 181, 229, 0.8) 12%, transparent 00%);
+  }
+
+  98% {
+    background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 73%, rgba(255, 187, 050, 0.8) 11%, transparent 00%), radial-gradient(circle at 27%, rgba(051, 181, 229, 0.8) 11%, transparent 00%);
+  }
+
+  100% {
+    background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 18%, transparent 00%), radial-gradient(circle at 77%, rgba(255, 187, 050, 0.8) 10%, transparent 00%), radial-gradient(circle at 23%, rgba(051, 181, 229, 0.8) 10%, transparent 00%);
+  }
+
+}
+.am-loading {
+  display: inline-block;
+  color: #fff;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  position: relative;
+  background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%),
+    radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 00%, transparent 00%),
+    radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%) no-repeat;
+  animation: am-loading 2s linear infinite;
+  margin: 20px;
+}

package/anim/am-rotate.scss

@@ -0,0 +1,17 @@
+@keyframes am-rotate-r360 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes am-rotate-l360 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}

package/anim/am-view-aa.scss

@@ -0,0 +1,91 @@
+// 显示动画
+@keyframes am-show-aa {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+// 隐藏动画
+@keyframes am-hide-aa {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+// 引用显示
+%am-show-aa {
+  opacity: 0;
+  transform-style: preserve-3d;
+}
+
+// 引用隐藏
+%am-hide-aa {
+  opacity: 1;
+  transform-style: preserve-3d;
+}
+
+// 传参调用
+@mixin am-view-aa($time: 350ms, $delay: 100ms) {
+  &.show,
+  &[view='2'] {
+    & > * {
+      @extend %am-show-aa;
+      animation: am-show-aa $time $delay both;
+    }
+  }
+
+  &.hide,
+  &[view='1'] {
+    opacity: 0;
+    transition: $time $delay;
+    pointer-events: none;
+
+    & > * {
+      @extend %am-hide-aa;
+      animation: am-hide-aa $time $delay both;
+    }
+  }
+
+  &.none,
+  &[view='0'] {
+    display: none;
+  }
+}
+
+// 动画时间
+$time: 350ms;
+$delay: 100ms;
+
+// 全套引用
+[am-view='aa'] {
+  &.show,
+  &[view='2'] {
+    & > * {
+      @extend %am-show-aa;
+      animation: am-show-aa $time $delay both;
+    }
+  }
+
+  &.hide,
+  &[view='1'] {
+    opacity: 0;
+    transition: $time $delay;
+    pointer-events: none;
+
+    & > * {
+      @extend %am-hide-aa;
+      animation: am-hide-aa $time $delay both;
+    }
+  }
+
+  &.none,
+  &[view='0'] {
+    display: none;
+  }
+}

package/anim/am-view-ab.scss

@@ -0,0 +1,107 @@
+// 显示动画
+@keyframes am-show-ab {
+  0% {
+    transform: scale3d(0.8, 0.8, 1);
+    opacity: 0;
+  }
+  70% {
+    transform: scale3d(1.02, 1.02, 1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale3d(1, 1, 1);
+    opacity: 1;
+  }
+}
+
+// 隐藏动画
+@keyframes am-hide-ab {
+  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-ab {
+  transform: scale3d(0.8, 0.8, 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($time: 350ms, $delay: 100ms) {
+  &.show,
+  &[view='2'] {
+    & > * {
+      @extend %am-show-ab;
+      animation: am-show-ab $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-ab;
+      animation: am-hide-ab $time $delay both;
+    }
+  }
+
+  &.none,
+  &[view='0'] {
+    display: none;
+  }
+}
+
+// 动画时间
+$time: 350ms;
+$delay: 100ms;
+
+// 全套引用
+[am-view='ab'] {
+  &.show,
+  &[view='2'] {
+    & > * {
+      @extend %am-show-ab;
+      animation: am-show-ab $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-ab;
+      animation: am-hide-ab $time $delay both;
+    }
+  }
+
+  &.none,
+  &[view='0'] {
+    display: none;
+  }
+}

package/anim/am-view-ac.scss

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

package/anim/am-view-ad.scss

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