@nutui/nutui-react 3.0.0-beta.8 → 3.0.0

package/dist/es/packages/animate/style/animate.scss

@@ -1,185 +1,161 @@
 .nut-animate {
-  /* Animation css */
+  /* Animation CSS */
   [class*='nut-animate-'] {
     animation-duration: 0.5s;
     animation-timing-function: ease-out;
     animation-fill-mode: both;
   }
 
-  //右侧向左侧划入
-  .nut-animate-slide-right {
-    animation-name: slide-right;
-  }
-
+  /* Slide Animations */
   @keyframes slide-right {
     0% {
       opacity: 0;
       transform: translateX(100%);
     }
-
     100% {
       opacity: 1;
       transform: translateX(0);
     }
   }
 
-  //左侧向右侧划入
-  .nut-animate-slide-left {
-    animation-name: slide-left;
-  }
-
   @keyframes slide-left {
     0% {
       opacity: 0;
       transform: translateX(-100%);
     }
-
     100% {
       opacity: 1;
       transform: translateX(0);
     }
   }
 
-  //上面向下面划入
-  .nut-animate-slide-top {
-    animation-name: slide-top;
-  }
-
   @keyframes slide-top {
     0% {
       opacity: 0;
       transform: translateY(-100%);
     }
-
     100% {
       opacity: 1;
       transform: translateY(0);
     }
   }
 
-  //下面向上面划入
-  .nut-animate-slide-bottom {
-    animation-name: slide-bottom;
-  }
-
   @keyframes slide-bottom {
     0% {
       opacity: 0;
       transform: translateY(100%);
     }
-
     100% {
       opacity: 1;
       transform: translateY(0);
     }
   }
 
-  //抖动
-  .nut-animate-shake {
-    animation-name: shake;
+  // Assign slide animations
+  // 右侧向左侧滑入
+  .nut-animate-slide-right {
+    animation-name: slide-right;
+  }
+  // 左侧向右侧滑入
+  .nut-animate-slide-left {
+    animation-name: slide-left;
+  }
+  // 上面向下面滑入
+  .nut-animate-slide-top {
+    animation-name: slide-top;
+  }
+  // 下面向上面滑入
+  .nut-animate-slide-bottom {
+    animation-name: slide-bottom;
   }
 
+  /* Shake Animation */
   @keyframes shake {
     0%,
     100% {
       transform: translateX(0);
     }
-
     10% {
       transform: translateX(-9px);
     }
-
     20% {
       transform: translateX(8px);
     }
-
     30% {
       transform: translateX(-7px);
     }
-
     40% {
       transform: translateX(6px);
     }
-
     50% {
       transform: translateX(-5px);
     }
-
     60% {
       transform: translateX(4px);
     }
-
     70% {
       transform: translateX(-3px);
     }
-
     80% {
       transform: translateX(2px);
     }
-
     90% {
       transform: translateX(-1px);
     }
   }
-
-  //心跳
-  .nut-animate-ripple {
-    animation-name: ripple;
+  .nut-animate-shake {
+    animation-name: shake;
   }
 
+  /* Ripple Animation */
   @keyframes ripple {
     0% {
       transform: scale(1);
     }
-
     50% {
       transform: scale(1.1);
     }
   }
-
-  //呼吸灯
-  .nut-animate-breath {
-    animation-name: breath;
-    animation-duration: 2700ms;
-    animation-timing-function: ease-in-out;
-    animation-direction: alternate;
+  .nut-animate-ripple {
+    animation-name: ripple;
   }
 
+  /* Breath Animation */
   @keyframes breath {
-    0% {
+    0%,
+    100% {
       transform: scale(1);
     }
-
     50% {
       transform: scale(1.1);
     }
-
-    100% {
-      transform: scale(1);
-    }
+  }
+  .nut-animate-breath {
+    animation-name: breath;
+    animation-duration: 2700ms;
+    animation-timing-function: ease-in-out;
+    animation-direction: alternate;
   }
 
-  // 水波
+  /* Twinkle Animation */
   .nut-animate-twinkle {
     position: relative;
-
     &::after,
     &::before {
-      width: 60 * 1px;
-      height: 60 * 1px;
+      width: 60px;
+      height: 60px;
       content: '';
       box-sizing: border-box;
-      border: 4 * 1px solid rgba(255, 255, 255, 0.6);
+      border: 4px solid rgba(255, 255, 255, 0.6);
       position: absolute;
-      border-radius: calc(60 / 2) * 1px;
+      border-radius: 30px;
       right: 50%;
-      margin-top: calc(-30 / 2) * 1px;
-      margin-right: calc(-60 / 2) * 1px;
+      margin-top: -30px;
+      margin-right: -30px;
       z-index: 1;
       transform: scale(0);
       animation: twinkle 2s ease-out infinite;
     }
-
     &::after {
       animation-delay: 0.4s;
     }
@@ -189,11 +165,9 @@
     0% {
       transform: scale(0);
     }
-
     20% {
       opacity: 1;
     }
-
     50%,
     100% {
       transform: scale(1.4);
@@ -201,13 +175,13 @@
     }
   }
 
+  /* Flicker Animation */
   .nut-animate-flicker {
     position: relative;
     overflow: hidden;
-
     &::after {
-      width: 100 * 1px;
-      height: 60 * 1px;
+      width: 100px;
+      height: 60px;
       position: absolute;
       left: 0;
       top: 0;
@@ -220,83 +194,67 @@
       );
       animation: flicker 1.5s linear infinite;
       transform: skewX(-20deg);
-      filter: blur(3 * 1px);
+      filter: blur(3px);
     }
   }
 
   @keyframes flicker {
     0% {
-      transform: translateX(-100 * 1px) skewX(-20deg);
+      transform: translateX(-100px) skewX(-20deg);
     }
-
     40%,
     100% {
-      transform: translateX(150 * 1px) skewX(-20deg);
+      transform: translateX(150px) skewX(-20deg);
     }
   }
 
-  // jump-跳跃
-  .nut-animate-jump {
-    transform-origin: center center;
-    animation: jump 0.7s linear;
-  }
-
+  /* Jump Animation */
   @keyframes jump {
     0% {
-      animation-timing-function: ease-in;
-      transform: rotate(0deg) translateY(0);
+      transform: rotate(0) translateY(0);
     }
-
     25% {
-      animation-timing-function: ease-out;
-      transform: rotate(10deg) translateY(20 * 1px);
+      transform: rotate(10deg) translateY(20px);
     }
-
     50% {
-      animation-timing-function: ease-in;
-      transform: rotate(0deg) translateY(-10 * 1px);
+      transform: rotate(0) translateY(-10px);
     }
-
     75% {
-      animation-timing-function: ease-out;
-      transform: rotate(-10deg) translateY(20 * 1px);
+      transform: rotate(-10deg) translateY(20px);
     }
-
     100% {
-      animation-timing-function: ease-in;
-      transform: rotate(0deg) translateY(0);
+      transform: rotate(0) translateY(0);
     }
   }
-
-  // 漂浮
-  .nut-animate-float {
-    position: relative;
-    animation-name: float-pop;
+  .nut-animate-jump {
+    transform-origin: center center;
+    animation: jump 0.7s linear;
   }
 
+  /* Float Animation */
   @keyframes float-pop {
     0% {
-      top: 0px;
+      top: 0;
     }
-
     25% {
       top: 1px;
     }
-
     50% {
       top: 4px;
     }
-
     75% {
       top: 1px;
     }
-
     100% {
-      top: 0px;
+      top: 0;
     }
   }
+  .nut-animate-float {
+    position: relative;
+    animation-name: float-pop;
+  }
 
-  //循环
+  /* Loop Animation */
   .loop {
     animation-iteration-count: infinite;
   }

package/dist/es/packages/animate/style/style.css

@@ -3,16 +3,22 @@
 /* #ifndef harmony */
 /* #endif */
 .nut-animate {
-  /* Animation css */
+  /* Animation CSS */
+  /* Slide Animations */
+  /* Shake Animation */
+  /* Ripple Animation */
+  /* Breath Animation */
+  /* Twinkle Animation */
+  /* Flicker Animation */
+  /* Jump Animation */
+  /* Float Animation */
+  /* Loop Animation */
 }
 .nut-animate [class*=nut-animate-] {
   animation-duration: 0.5s;
   animation-timing-function: ease-out;
   animation-fill-mode: both;
 }
-.nut-animate .nut-animate-slide-right {
-  animation-name: slide-right;
-}
 @keyframes slide-right {
   0% {
     opacity: 0;
@@ -23,9 +29,6 @@
     transform: translateX(0);
   }
 }
-.nut-animate .nut-animate-slide-left {
-  animation-name: slide-left;
-}
 @keyframes slide-left {
   0% {
     opacity: 0;
@@ -36,9 +39,6 @@
     transform: translateX(0);
   }
 }
-.nut-animate .nut-animate-slide-top {
-  animation-name: slide-top;
-}
 @keyframes slide-top {
   0% {
     opacity: 0;
@@ -49,9 +49,6 @@
     transform: translateY(0);
   }
 }
-.nut-animate .nut-animate-slide-bottom {
-  animation-name: slide-bottom;
-}
 @keyframes slide-bottom {
   0% {
     opacity: 0;
@@ -62,8 +59,17 @@
     transform: translateY(0);
   }
 }
-.nut-animate .nut-animate-shake {
-  animation-name: shake;
+.nut-animate .nut-animate-slide-right {
+  animation-name: slide-right;
+}
+.nut-animate .nut-animate-slide-left {
+  animation-name: slide-left;
+}
+.nut-animate .nut-animate-slide-top {
+  animation-name: slide-top;
+}
+.nut-animate .nut-animate-slide-bottom {
+  animation-name: slide-bottom;
 }
 @keyframes shake {
   0%, 100% {
@@ -97,8 +103,8 @@
     transform: translateX(-1px);
   }
 }
-.nut-animate .nut-animate-ripple {
-  animation-name: ripple;
+.nut-animate .nut-animate-shake {
+  animation-name: shake;
 }
 @keyframes ripple {
   0% {
@@ -108,22 +114,22 @@
     transform: scale(1.1);
   }
 }
-.nut-animate .nut-animate-breath {
-  animation-name: breath;
-  animation-duration: 2700ms;
-  animation-timing-function: ease-in-out;
-  animation-direction: alternate;
+.nut-animate .nut-animate-ripple {
+  animation-name: ripple;
 }
 @keyframes breath {
-  0% {
+  0%, 100% {
     transform: scale(1);
   }
   50% {
     transform: scale(1.1);
   }
-  100% {
-    transform: scale(1);
-  }
+}
+.nut-animate .nut-animate-breath {
+  animation-name: breath;
+  animation-duration: 2700ms;
+  animation-timing-function: ease-in-out;
+  animation-direction: alternate;
 }
 .nut-animate .nut-animate-twinkle {
   position: relative;
@@ -137,7 +143,7 @@
   position: absolute;
   border-radius: 30px;
   right: 50%;
-  margin-top: -15px;
+  margin-top: -30px;
   margin-right: -30px;
   z-index: 1;
   transform: scale(0);
@@ -183,39 +189,30 @@
     transform: translateX(150px) skewX(-20deg);
   }
 }
-.nut-animate .nut-animate-jump {
-  transform-origin: center center;
-  animation: jump 0.7s linear;
-}
 @keyframes jump {
   0% {
-    animation-timing-function: ease-in;
-    transform: rotate(0deg) translateY(0);
+    transform: rotate(0) translateY(0);
   }
   25% {
-    animation-timing-function: ease-out;
     transform: rotate(10deg) translateY(20px);
   }
   50% {
-    animation-timing-function: ease-in;
-    transform: rotate(0deg) translateY(-10px);
+    transform: rotate(0) translateY(-10px);
   }
   75% {
-    animation-timing-function: ease-out;
     transform: rotate(-10deg) translateY(20px);
   }
   100% {
-    animation-timing-function: ease-in;
-    transform: rotate(0deg) translateY(0);
+    transform: rotate(0) translateY(0);
   }
 }
-.nut-animate .nut-animate-float {
-  position: relative;
-  animation-name: float-pop;
+.nut-animate .nut-animate-jump {
+  transform-origin: center center;
+  animation: jump 0.7s linear;
 }
 @keyframes float-pop {
   0% {
-    top: 0px;
+    top: 0;
   }
   25% {
     top: 1px;
@@ -227,9 +224,13 @@
     top: 1px;
   }
   100% {
-    top: 0px;
+    top: 0;
   }
 }
+.nut-animate .nut-animate-float {
+  position: relative;
+  animation-name: float-pop;
+}
 .nut-animate .loop {
   animation-iteration-count: infinite;
 }