From 0020ccbaae30afd9beebd98c7cba01b22c19a130 Mon Sep 17 00:00:00 2001
From: guy <guy@finereport.com>
Date: Tue, 4 Jan 2022 11:46:03 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96=E4=B8=80=E4=B8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/less/core/utils/motion/fade.less  |  28 ++-
 src/less/core/utils/motion/move.less  | 150 +++++++++++----
 src/less/core/utils/motion/slide.less | 222 ++++++++++-----------
 src/less/core/utils/motion/zoom.less  | 265 ++++++++++++++------------
 4 files changed, 383 insertions(+), 282 deletions(-)

diff --git a/src/less/core/utils/motion/fade.less b/src/less/core/utils/motion/fade.less
index 9ad3bbaea..d51a68c75 100644
--- a/src/less/core/utils/motion/fade.less
+++ b/src/less/core/utils/motion/fade.less
@@ -14,12 +14,22 @@
 
 .fade-motion(bi-fade, biFade);
 
-//.keyframes(biFadeIn, {
-//  0% {opacity: 0;}
-//  100% {opacity: 1;}
-//});
-//
-//.keyframes(biFadeOut, {
-//  0% {opacity: 1;}
-//  100% {opacity: 0;}
-//});
+.keyframes(biFadeIn, {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+});
+
+.keyframes(biFadeOut, {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+});
diff --git a/src/less/core/utils/motion/move.less b/src/less/core/utils/motion/move.less
index decc9f33d..3024c2a8b 100644
--- a/src/less/core/utils/motion/move.less
+++ b/src/less/core/utils/motion/move.less
@@ -17,42 +17,114 @@
 .move-motion(bi-move-left, biMoveLeft);
 .move-motion(bi-move-right, biMoveRight);
 
-//.keyframes(biMoveDownIn, {
-//  0% {transform: translateY(100%);transform-origin: 0 0;opacity: 0;}
-//  100% {transform: translateY(0%);transform-origin: 0 0;opacity: 1;}
-//});
-//
-//.keyframes(biMoveDownOut, {
-//  0% {transform: translateY(0%);transform-origin: 0 0;opacity: 1;}
-//  100% {transform: translateY(100%);transform-origin: 0 0;opacity: 0;}
-//});
-//
-//.keyframes(biMoveLeftIn, {
-//  0% {transform: translateX(-100%);transform-origin: 0 0;opacity: 0;}
-//  100% {transform: translateX(0%);transform-origin: 0 0;opacity: 1;}
-//});
-//
-//.keyframes(biMoveLeftOut, {
-//  0% {transform: translateX(0%);transform-origin: 0 0;opacity: 1;}
-//  100% {transform: translateX(-100%);transform-origin: 0 0;opacity: 0;}
-//});
-//
-//.keyframes(biMoveRightIn, {
-//  0% {transform: translateX(100%);transform-origin: 0 0;opacity: 0;}
-//  100% {transform: translateX(0%);transform-origin: 0 0;opacity: 1;}
-//});
-//
-//.keyframes(biMoveRightOut, {
-//  0% {transform: translateX(0%);transform-origin: 0 0;opacity: 1;}
-//  100% {transform: translateX(100%);transform-origin: 0 0;opacity: 0;}
-//});
-//
-//.keyframes(biMoveUpIn, {
-//  0% {transform: translateY(-100%);transform-origin: 0 0;opacity: 0;}
-//  100% {transform: translateY(0%);transform-origin: 0 0;opacity: 1;}
-//});
-//
-//.keyframes(biMoveUpOut, {
-//  0% {transform: translateY(0%);transform-origin: 0 0;opacity: 1;}
-//  100% {transform: translateY(-100%);transform-origin: 0 0;opacity: 0;}
-//});
+.keyframes(biMoveDownIn, {
+  0% {
+    transform: translateY(100%);
+    transform-origin: 0 0;
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(0%);
+    transform-origin: 0 0;
+    opacity: 1;
+  }
+});
+
+.keyframes(biMoveDownOut, {
+  0% {
+    transform: translateY(0%);
+    transform-origin: 0 0;
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateY(100%);
+    transform-origin: 0 0;
+    opacity: 0;
+  }
+});
+
+.keyframes(biMoveLeftIn, {
+  0% {
+    transform: translateX(-100%);
+    transform-origin: 0 0;
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateX(0%);
+    transform-origin: 0 0;
+    opacity: 1;
+  }
+});
+
+.keyframes(biMoveLeftOut, {
+  0% {
+    transform: translateX(0%);
+    transform-origin: 0 0;
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateX(-100%);
+    transform-origin: 0 0;
+    opacity: 0;
+  }
+});
+
+.keyframes(biMoveRightIn, {
+  0% {
+    transform: translateX(100%);
+    transform-origin: 0 0;
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateX(0%);
+    transform-origin: 0 0;
+    opacity: 1;
+  }
+});
+
+.keyframes(biMoveRightOut, {
+  0% {
+    transform: translateX(0%);
+    transform-origin: 0 0;
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateX(100%);
+    transform-origin: 0 0;
+    opacity: 0;
+  }
+});
+
+.keyframes(biMoveUpIn, {
+  0% {
+    transform: translateY(-100%);
+    transform-origin: 0 0;
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(0%);
+    transform-origin: 0 0;
+    opacity: 1;
+  }
+});
+
+.keyframes(biMoveUpOut, {
+  0% {
+    transform: translateY(0%);
+    transform-origin: 0 0;
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateY(-100%);
+    transform-origin: 0 0;
+    opacity: 0;
+  }
+});
diff --git a/src/less/core/utils/motion/slide.less b/src/less/core/utils/motion/slide.less
index 77909bbbc..0fa6567a4 100644
--- a/src/less/core/utils/motion/slide.less
+++ b/src/less/core/utils/motion/slide.less
@@ -17,114 +17,114 @@
 .slide-motion(bi-slide-left, biSlideLeft);
 .slide-motion(bi-slide-right, biSlideRight);
 
-//.keyframes(biSlideUpIn, {
-//  0% {
-//    transform: scaleY(0.8);
-//    transform-origin: 0% 0%;
-//    opacity: 0;
-//  }
-//
-//  100% {
-//    transform: scaleY(1);
-//    transform-origin: 0% 0%;
-//    opacity: 1;
-//  }
-//});
-//
-//.keyframes(biSlideUpOut, {
-//  0% {
-//    transform: scaleY(1);
-//    transform-origin: 0% 0%;
-//    opacity: 1;
-//  }
-//
-//  100% {
-//    transform: scaleY(0.8);
-//    transform-origin: 0% 0%;
-//    opacity: 0;
-//  }
-//});
-//
-//.keyframes(biSlideDownIn, {
-//  0% {
-//    transform: scaleY(0.8);
-//    transform-origin: 100% 100%;
-//    opacity: 0;
-//  }
-//
-//  100% {
-//    transform: scaleY(1);
-//    transform-origin: 100% 100%;
-//    opacity: 1;
-//  }
-//});
-//
-//.keyframes(biSlideDownOut, {
-//  0% {
-//    transform: scaleY(1);
-//    transform-origin: 100% 100%;
-//    opacity: 1;
-//  }
-//
-//  100% {
-//    transform: scaleY(0.8);
-//    transform-origin: 100% 100%;
-//    opacity: 0;
-//  }
-//});
-//
-//.keyframes(biSlideLeftIn, {
-//  0% {
-//    transform: scaleX(0.8);
-//    transform-origin: 0% 0%;
-//    opacity: 0;
-//  }
-//
-//  100% {
-//    transform: scaleX(1);
-//    transform-origin: 0% 0%;
-//    opacity: 1;
-//  }
-//});
-//
-//.keyframes(biSlideLeftOut, {
-//  0% {
-//    transform: scaleX(1);
-//    transform-origin: 0% 0%;
-//    opacity: 1;
-//  }
-//
-//  100% {
-//    transform: scaleX(0.8);
-//    transform-origin: 0% 0%;
-//    opacity: 0;
-//  }
-//});
-//
-//.keyframes(biSlideRightIn, {
-//  0% {
-//    transform: scaleX(0.8);
-//    transform-origin: 100% 0%;
-//    opacity: 0;
-//  }
-//
-//  100% {
-//    transform: scaleX(1);
-//    transform-origin: 100% 0%;
-//    opacity: 1;
-//  }
-//});
-//
-//.keyframes(biSlideRightOut, {
-//  0% {
-//    transform: scaleX(1);
-//    transform-origin: 100% 0%;
-//    opacity: 1;
-//  }
-//
-//  100% {
-//    transform: scaleX(0.8);
-//    transform-origin: 100% 0%;
-//    opacity: 0;
-//  }
-//});
+.keyframes(biSlideUpIn, {
+  0% {
+    transform: scaleY(0.8);
+    transform-origin: 0% 0%;
+    opacity: 0;
+  }
+
+  100% {
+    transform: scaleY(1);
+    transform-origin: 0% 0%;
+    opacity: 1;
+  }
+});
+
+.keyframes(biSlideUpOut, {
+  0% {
+    transform: scaleY(1);
+    transform-origin: 0% 0%;
+    opacity: 1;
+  }
+
+  100% {
+    transform: scaleY(0.8);
+    transform-origin: 0% 0%;
+    opacity: 0;
+  }
+});
+
+.keyframes(biSlideDownIn, {
+  0% {
+    transform: scaleY(0.8);
+    transform-origin: 100% 100%;
+    opacity: 0;
+  }
+
+  100% {
+    transform: scaleY(1);
+    transform-origin: 100% 100%;
+    opacity: 1;
+  }
+});
+
+.keyframes(biSlideDownOut, {
+  0% {
+    transform: scaleY(1);
+    transform-origin: 100% 100%;
+    opacity: 1;
+  }
+
+  100% {
+    transform: scaleY(0.8);
+    transform-origin: 100% 100%;
+    opacity: 0;
+  }
+});
+
+.keyframes(biSlideLeftIn, {
+  0% {
+    transform: scaleX(0.8);
+    transform-origin: 0% 0%;
+    opacity: 0;
+  }
+
+  100% {
+    transform: scaleX(1);
+    transform-origin: 0% 0%;
+    opacity: 1;
+  }
+});
+
+.keyframes(biSlideLeftOut, {
+  0% {
+    transform: scaleX(1);
+    transform-origin: 0% 0%;
+    opacity: 1;
+  }
+
+  100% {
+    transform: scaleX(0.8);
+    transform-origin: 0% 0%;
+    opacity: 0;
+  }
+});
+
+.keyframes(biSlideRightIn, {
+  0% {
+    transform: scaleX(0.8);
+    transform-origin: 100% 0%;
+    opacity: 0;
+  }
+
+  100% {
+    transform: scaleX(1);
+    transform-origin: 100% 0%;
+    opacity: 1;
+  }
+});
+
+.keyframes(biSlideRightOut, {
+  0% {
+    transform: scaleX(1);
+    transform-origin: 100% 0%;
+    opacity: 1;
+  }
+
+  100% {
+    transform: scaleX(0.8);
+    transform-origin: 100% 0%;
+    opacity: 0;
+  }
+});
diff --git a/src/less/core/utils/motion/zoom.less b/src/less/core/utils/motion/zoom.less
index c16ce98a9..2407b8428 100644
--- a/src/less/core/utils/motion/zoom.less
+++ b/src/less/core/utils/motion/zoom.less
@@ -29,133 +29,152 @@
 .zoom-motion(bi-zoom-left, biZoomLeft);
 .zoom-motion(bi-zoom-right, biZoomRight);
 
-//.keyframes(biZoomIn, {
-//  0% {
-//    transform: scale(0.2);
-//    opacity: 0;
-//  }
-//
-//  100% {
-//    transform: scale(1);
-//    opacity: 1;
-//  }
-//});
-//
-//.keyframes(biZoomOut, {
-//  0% { transform: scale(1); }
-//  100% { transform: scale(0.2); opacity: 0; }
-//});
+.keyframes(biZoomIn, {
+  0% {
+    transform: scale(0.2);
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+});
+
+.keyframes(biZoomOut, {
+  0% {
+    transform: scale(1);
+  }
+
+  100% {
+    transform: scale(0.2);
+    opacity: 0;
+  }
+});
 
 .keyframes(biZoomBigIn, {
-  0% {transform: scale(0.8);opacity: 0;}
-  100% {transform: scale(1);opacity: 1;}
+  0% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
 });
 
 .keyframes(biZoomBigOut, {
-  0% {transform: scale(1);}
-  100% {transform: scale(0.8);opacity: 0;}
+  0% {
+    transform: scale(1);
+  }
+
+  100% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+});
+
+.keyframes(biZoomUpIn, {
+  0% {
+    transform: scale(0.8);
+    transform-origin: 50% 0%;
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1);
+    transform-origin: 50% 0%;
+  }
+});
+
+.keyframes(biZoomUpOut, {
+  0% {
+    transform: scale(1);
+    transform-origin: 50% 0%;
+  }
+
+  100% {
+    transform: scale(0.8);
+    transform-origin: 50% 0%;
+    opacity: 0;
+  }
+});
+
+.keyframes(biZoomLeftIn, {
+  0% {
+    transform: scale(0.8);
+    transform-origin: 0% 50%;
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1);
+    transform-origin: 0% 50%;
+  }
 });
 
-//.keyframes(biZoomUpIn, {
-//  0% {
-//    transform: scale(0.8);
-//    transform-origin: 50% 0%;
-//    opacity: 0;
-//  }
-//
-//  100% {
-//    transform: scale(1);
-//    transform-origin: 50% 0%;
-//  }
-//});
-//
-//.keyframes(biZoomUpOut, {
-//  0% {
-//    transform: scale(1);
-//    transform-origin: 50% 0%;
-//  }
-//
-//  100% {
-//    transform: scale(0.8);
-//    transform-origin: 50% 0%;
-//    opacity: 0;
-//  }
-//});
-//
-//.keyframes(biZoomLeftIn, {
-//  0% {
-//    transform: scale(0.8);
-//    transform-origin: 0% 50%;
-//    opacity: 0;
-//  }
-//
-//  100% {
-//    transform: scale(1);
-//    transform-origin: 0% 50%;
-//  }
-//});
-//
-//.keyframes(biZoomLeftOut, {
-//  0% {
-//    transform: scale(1);
-//    transform-origin: 0% 50%;
-//  }
-//
-//  100% {
-//    transform: scale(0.8);
-//    transform-origin: 0% 50%;
-//    opacity: 0;
-//  }
-//});
-//
-//.keyframes(biZoomRightIn, {
-//  0% {
-//    transform: scale(0.8);
-//    transform-origin: 100% 50%;
-//    opacity: 0;
-//  }
-//
-//  100% {
-//    transform: scale(1);
-//    transform-origin: 100% 50%;
-//  }
-//});
-//
-//.keyframes(biZoomRightOut, {
-//  0% {
-//    transform: scale(1);
-//    transform-origin: 100% 50%;
-//  }
-//
-//  100% {
-//    transform: scale(0.8);
-//    transform-origin: 100% 50%;
-//    opacity: 0;
-//  }
-//});
-//
-//.keyframes(biZoomDownIn, {
-//  0% {
-//    transform: scale(0.8);
-//    transform-origin: 50% 100%;
-//    opacity: 0;
-//  }
-//
-//  100% {
-//    transform: scale(1);
-//    transform-origin: 50% 100%;
-//  }
-//});
-//
-//.keyframes(biZoomDownOut, {
-//  0% {
-//    transform: scale(1);
-//    transform-origin: 50% 100%;
-//  }
-//
-//  100% {
-//    transform: scale(0.8);
-//    transform-origin: 50% 100%;
-//    opacity: 0;
-//  }
-//});
+.keyframes(biZoomLeftOut, {
+  0% {
+    transform: scale(1);
+    transform-origin: 0% 50%;
+  }
+
+  100% {
+    transform: scale(0.8);
+    transform-origin: 0% 50%;
+    opacity: 0;
+  }
+});
+
+.keyframes(biZoomRightIn, {
+  0% {
+    transform: scale(0.8);
+    transform-origin: 100% 50%;
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1);
+    transform-origin: 100% 50%;
+  }
+});
+
+.keyframes(biZoomRightOut, {
+  0% {
+    transform: scale(1);
+    transform-origin: 100% 50%;
+  }
+
+  100% {
+    transform: scale(0.8);
+    transform-origin: 100% 50%;
+    opacity: 0;
+  }
+});
+
+.keyframes(biZoomDownIn, {
+  0% {
+    transform: scale(0.8);
+    transform-origin: 50% 100%;
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1);
+    transform-origin: 50% 100%;
+  }
+});
+
+.keyframes(biZoomDownOut, {
+  0% {
+    transform: scale(1);
+    transform-origin: 50% 100%;
+  }
+
+  100% {
+    transform: scale(0.8);
+    transform-origin: 50% 100%;
+    opacity: 0;
+  }
+});