fix(Popup): 修复频繁切换 显示/隐藏 状态闪烁的问题

因使用了 less 的 each 函数，所以将 less 升级到 3.12.2 版本

close #978

Author: juzi214032

package.json

@@ -48,7 +48,7 @@
     "gulp-util": "^3.0.8",
     "husky": "^4.2.5",
     "jest": "^24.8.0",
-    "less": "^2.7.3",
+    "less": "^3.12.2",
     "lodash": "^4.17.15",
     "miniprogram-simulate": "^1.0.7"
   },

src/popup/index.less

@@ -1,3 +1,82 @@
+@positions: center, top, left, right, bottom;
+@animationPostions: {
+  top: translate3d(0, -100%, 0);
+  left: translate3d(-100%, 0, 0);
+  right: translate3d(100%, 0, 0);
+  bottom: translate3d(0, 100%, 0);
+};
+
+// 不同位置的动画使用
+each(@positions,{
+  .popup-fade-@{value}-active-show{
+    animation: ~'popup-@{value}-fadein 0.3s forwards';
+  }
+
+  .popup-fade-@{value}-active-hide{
+    animation: ~'popup-@{value}-fadeout 0.3s forwards';
+  }
+
+});
+
+// 不同位置的动画定义
+each(@animationPostions,{
+  @keyframes ~'popup-@{key}-fadein' {
+    0% {
+      transform: @value;
+      opacity: 0;
+    }
+
+    100% {
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes ~'popup-@{key}-fadeout' {
+    0% {
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+
+    100% {
+      transform: @value;
+      opacity: 0.1;
+    }
+  }
+});
+
+@keyframes popup-center-fadein {
+  0% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+
+  50% {
+    transform: scale(1.1);
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes popup-center-fadeout {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  50% {
+    transform: scale(1.1);
+  }
+
+  100% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+}
+
 .container-popup {
   visibility: hidden;
   position: fixed;
@@ -70,187 +149,3 @@
   flex-direction: column-reverse;
   width: 100%;
 }
-
-.popup-fade-center-active-show {
-  animation: popup-center-fadein 0.4s;
-}
-
-.popup-fade-center-active-hide {
-  animation: popup-center-fadeout 0.4s;
-}
-
-.popup-fade-top-active-show {
-  animation:popup-top-fadein 0.3s ease-in-out;
-}
-
-.popup-fade-top-active-hide {
-  animation:popup-top-fadeout 0.3s ease-in-out;
-}
-
-.popup-fade-right-active-show {
-  animation: popup-right-fadein 0.3s ease-in-out;
-}
-
-.popup-fade-right-active-hide {
-  animation: popup-right-fadeout 0.3s ease-in-out;
-}
-
-.popup-fade-left-active-show {
-  animation: popup-left-fadein 0.3s ease-in-out;
-}
-
-.popup-fade-left-active-hide {
-  animation: popup-left-fadeout 0.3s ease-in-out;
-}
-
-.popup-fade-bottom-active-show {
-  animation: popup-bottom-fadein 0.3s ease-in-out;
-}
-
-.popup-fade-bottom-active-hide {
-  animation: popup-bottom-fadeout 0.3s ease-in-out;
-}
-
-// .popup-fade-center-leave {
-//   opacity: 0;
-// }
-
-@keyframes popup-center-fadein {
-  0% {
-    transform: scale(0.8);
-    opacity: 0;
-  }
-
-  50% {
-    transform: scale(1.1);
-  }
-
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-@keyframes popup-center-fadeout {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  50% {
-    transform: scale(1.1);
-  }
-
-  100% {
-    transform: scale(0.8);
-    opacity: 0;
-  }
-}
-
-@keyframes popup-top-fadein {
-  0% {
-    transform: translate3d(0, -100%, 0);
-    opacity: 0.1;
-  }
-
-  100% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes popup-top-fadeout {
-  0% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-
-  100% {
-    transform: translate3d(0, -100%, 0);
-    opacity: 0.1;
-  }
-}
-
-@keyframes popup-left-fadein {
-  0% {
-    transform: translate3d(-100%, 0, 0);
-    opacity: 0.1;
-  }
-
-
-  100% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes popup-left-fadeout {
-  0% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-
-
-  100% {
-    transform: translate3d(-100%, 0, 0);
-    opacity: 0.1;
-  }
-}
-
-
-@keyframes popup-right-fadein {
-  0% {
-    transform: translate3d(100%, 0, 0);
-    opacity: 0.1;
-  }
-
-  /* 50% {
-    transform: translate3d(25%, 0,  0);
-    opacity: 0.7;
-  } */
-
-  100% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes popup-right-fadeout {
-  0% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-
-  100% {
-    transform: translate3d(100%, 0, 0);
-    opacity: 0.1;
-  }
-}
-
-@keyframes popup-bottom-fadein {
-  0% {
-    transform: translate3d(0, 100%, 0);
-    opacity: 0;
-
-  }
-
-
-  100% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-
-@keyframes popup-bottom-fadeout {
-  0% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-
-
-  100% {
-    transform: translate3d(0, 100%, 0);
-    opacity: 0.1;
-  }
-}