init

uni_modules/nutui-uni/styles/animation/drop.scss

@@ -0,0 +1,26 @@
+@keyframes nutDropIn {
+  0% {
+    opacity: 0;
+    transform: scaleY(0.8);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
+@keyframes nutDropOut {
+  0% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scaleY(0.8);
+  }
+}
+
+// select、dropdown
+@include make-animation(nutDrop);

uni_modules/nutui-uni/styles/animation/ease.scss

@@ -0,0 +1,25 @@
+@keyframes nutEaseIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes nutEaseOut {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+
+@include make-animation(nutEase);

uni_modules/nutui-uni/styles/animation/fade.scss

@@ -0,0 +1,127 @@
+@keyframes nutFadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes nutFadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@include make-animation(nutFade);
+
+
+
+@keyframes nutFadeUpIn {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes nutFadeUpOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+@include make-animation(nutFadeUp);
+
+
+@keyframes nutFadeDownIn {
+  from {
+    opacity: 0;
+    transform: translate3d(0, -100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes nutFadeDownOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+@include make-animation(nutFadeDown);
+
+
+
+@keyframes nutFadeLeftIn {
+  from {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes nutFadeLeftOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@include make-animation(nutFadeLeft);
+
+
+@keyframes nutFadeRightIn {
+  from {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes nutFadeRightOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@include make-animation(nutFadeRight);

uni_modules/nutui-uni/styles/animation/icon.scss

@@ -0,0 +1,228 @@
+   @keyframes rotation {
+        0% {
+            transform: rotate(0deg);
+        }
+
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+   
+   
+   // 跳动
+    @keyframes nutJump {
+        to {
+            transform: scale3d(0.8, 1, 0.9) translateY(-10px);
+        }
+    }
+
+    @keyframes nutJump {
+        to {
+            transform: scale3d(0.8, 1, 0.9) translateY(-10px);
+        }
+    }
+
+    @keyframes nutJumpOne {
+        50% {
+            transform: scale3d(0.8, 1, 0.9) translateY(-10px);
+        }
+
+        100% {
+            transform: scale3d(1, 1, 1) translateY(0);
+        }
+    }
+
+    @keyframes nutJumpOne {
+        50% {
+            transform: scale3d(0.8, 1, 0.9) translateY(-10px);
+        }
+
+        100% {
+            transform: scale3d(1, 1, 1) translateY(0);
+        }
+    }
+
+    // 闪烁
+    @keyframes nutBlink {
+        0% {
+            opacity: 0;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+
+    @keyframes nutBlink {
+        0% {
+            opacity: 0;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+
+    // 呼吸
+    @keyframes nutBreathe {
+        0%,
+        100% {
+            transform: scale(1);
+        }
+
+        50% {
+            transform: scale(1.2);
+        }
+    }
+
+    @keyframes nutBreathe {
+        0%,
+        100% {
+            transform: scale(1);
+        }
+
+        50% {
+            transform: scale(1.2);
+        }
+    }
+
+    // 闪现
+    @keyframes nutFlash {
+        0%,
+        50%,
+        100% {
+            opacity: 1;
+        }
+
+        25%,
+        75% {
+            opacity: 0;
+        }
+    }
+
+    @keyframes nutFlash {
+        0%,
+        50%,
+        100% {
+            opacity: 1;
+        }
+
+        25%,
+        75% {
+            opacity: 0;
+        }
+    }
+
+    // 弹动
+    @keyframes nutBounce {
+        0%,
+        20%,
+        53%,
+        100% {
+            transform: translate3d(0, 0, 0);
+            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+        }
+
+        40%,
+        43% {
+            transform: translate3d(0, -30px, 0) scaleY(1.1);
+            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+        }
+
+        70% {
+            transform: translate3d(0, -15px, 0) scaleY(1.05);
+            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+        }
+
+        80% {
+            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+            transform: translate3d(0, 0, 0) scaleY(0.95);
+        }
+
+        90% {
+            transform: translate3d(0, -4px, 0) scaleY(1.02);
+        }
+    }
+
+    @keyframes nutBounce {
+        0%,
+        20%,
+        53%,
+        100% {
+            transform: translate3d(0, 0, 0);
+            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+        }
+
+        40%,
+        43% {
+            transform: translate3d(0, -30px, 0) scaleY(1.1);
+            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+        }
+
+        70% {
+            transform: translate3d(0, -15px, 0) scaleY(1.05);
+            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+        }
+
+        80% {
+            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+            transform: translate3d(0, 0, 0) scaleY(0.95);
+        }
+
+        90% {
+            transform: translate3d(0, -4px, 0) scaleY(1.02);
+        }
+    }
+
+    // 抖动
+    @keyframes nutShake {
+        0% {
+            transform: translateX(0);
+        }
+
+        6.5% {
+            transform: translateX(-6px) rotateY(-9deg);
+        }
+
+        18.5% {
+            transform: translateX(5px) rotateY(7deg);
+        }
+
+        31.5% {
+            transform: translateX(-3px) rotateY(-5deg);
+        }
+
+        43.5% {
+            transform: translateX(2px) rotateY(3deg);
+        }
+
+        50% {
+            transform: translateX(0);
+        }
+    }
+
+    @keyframes nutShake {
+        0% {
+            transform: translateX(0);
+        }
+
+        6.5% {
+            transform: translateX(-6px) rotateY(-9deg);
+        }
+
+        18.5% {
+            transform: translateX(5px) rotateY(7deg);
+        }
+
+        31.5% {
+            transform: translateX(-3px) rotateY(-5deg);
+        }
+
+        43.5% {
+            transform: translateX(2px) rotateY(3deg);
+        }
+
+        50% {
+            transform: translateX(0);
+        }
+    }

uni_modules/nutui-uni/styles/animation/index.scss

@@ -0,0 +1,8 @@
+// Animation
+@import 'fade';
+@import 'zoom';
+@import 'ease';
+@import 'drop';
+@import 'rotate';
+@import 'slide';
+@import 'icon';

uni_modules/nutui-uni/styles/animation/rotate.scss

@@ -0,0 +1,11 @@
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@include make-animation(nutRotate);

uni_modules/nutui-uni/styles/animation/slide.scss

@@ -0,0 +1,102 @@
+@keyframes nutSlideUpIn {
+  from {
+    visibility: visible;
+    transform: translate3d(0, 100%, 0);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes nutSlideUpOut {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+@include make-animation(nutSlideUp);
+
+
+@keyframes nutSlideDownOut {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+
+@keyframes nutSlideDownIn {
+  from {
+    visibility: visible;
+    transform: translate3d(0, -100%, 0);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@include make-animation(nutSlideDown);
+
+
+@keyframes nutSlideLeftIn {
+  from {
+    visibility: visible;
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+
+@keyframes nutSlideLeftOut {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@include make-animation(nutSlideLeft);
+
+
+
+@keyframes nutSlideRightIn {
+  from {
+    visibility: visible;
+    transform: translate3d(100%, 0, 0);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+
+@keyframes nutSlideRightOut {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@include make-animation(nutSlideRight);

uni_modules/nutui-uni/styles/animation/zoom.scss

@@ -0,0 +1,56 @@
+@keyframes nutZoomIn {
+  0% {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes nutZoomOut {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@include make-animation(nutZoom);
+
+
+@keyframes nutFadeZoomIn {
+  0% {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes nutFadeZoomOut {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@include make-animation(nutFadeZoom);