From 58b04e8a117d6017db633ac3ca218a5d3a442561 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 25 Jun 2015 10:39:43 +0800
Subject: [PATCH] animation for popover

---
 style/core/motion.less | 153 +++++++++++++++++++++++++++++++++++------
 1 file changed, 131 insertions(+), 22 deletions(-)

diff --git a/style/core/motion.less b/style/core/motion.less
index 799a4821c3..0d9d9596a5 100644
--- a/style/core/motion.less
+++ b/style/core/motion.less
@@ -1,31 +1,36 @@
 .effect() {
-  animation-duration: 0.25s;
+  animation-duration: 0.24s;
   animation-fill-mode: both;
   display: block !important;
 }
 
-.zoom-enter {
-  opacity: 0;
-  .effect();
-  animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
-  animation-play-state: paused;
-}
-
-.zoom-leave {
-  .effect();
-  animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
-  animation-play-state: paused;
-}
-
-.zoom-enter.zoom-enter-active {
-  animation-name: zoomIn;
-  animation-play-state: running;
+.motion(@className, @keyframeName) {
+  .@{className}-enter {
+    opacity: 0;
+    .effect();
+    animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
+    animation-play-state: paused;
+  }
+  .@{className}-leave {
+    .effect();
+    animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
+    animation-play-state: paused;
+  }
+  .@{className}-enter.@{className}-enter-active {
+    animation-name: ~"@{keyframeName}In";
+    animation-play-state: running;
+  }
+  .@{className}-leave.@{className}-leave-active {
+    animation-name: ~"@{keyframeName}Out";
+    animation-play-state: running;
+  }
 }
 
-.zoom-leave.zoom-leave-active {
-  animation-name: zoomOut;
-  animation-play-state: running;
-}
+.motion(zoom,zoom);
+.motion(zoom-up,zoomUp);
+.motion(zoom-down,zoomDown);
+.motion(zoom-left,zoomLeft);
+.motion(zoom-right,zoomRight);
 
 @keyframes zoomIn {
   0% {
@@ -52,6 +57,110 @@
   }
 }
 
+@keyframes zoomUpIn {
+  0% {
+    opacity: 0;
+    transform-origin: 50% 0%;
+    transform: scale(0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 50% 0%;
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes zoomUpOut {
+  0% {
+    opacity: 1;
+    transform-origin: 50% 0%;
+    transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 50% 0%;
+    transform: scale(0, 0);
+  }
+}
+
+@keyframes zoomLeftIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0% 50%;
+    transform: scale(0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 0% 50%;
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes zoomLeftOut {
+  0% {
+    opacity: 1;
+    transform-origin: 0% 50%;
+    transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 0% 50%;
+    transform: scale(0, 0);
+  }
+}
+
+@keyframes zoomRightIn {
+  0% {
+    opacity: 0;
+    transform-origin: 100% 50%;
+    transform: scale(0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 100% 50%;
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes zoomRightOut {
+  0% {
+    opacity: 1;
+    transform-origin: 100% 50%;
+    transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 100% 50%;
+    transform: scale(0, 0);
+  }
+}
+
+@keyframes zoomDownIn {
+  0% {
+    opacity: 0;
+    transform-origin: 50% 100%;
+    transform: scale(0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 50% 100%;
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes zoomDownOut {
+  0% {
+    opacity: 1;
+    transform-origin: 50% 100%;
+    transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 50% 100%;
+    transform: scale(0, 0);
+  }
+}
+
 .slide-up-enter {
   .effect();
   transform-origin: 0 0;
@@ -153,4 +262,4 @@
     transform-origin: 50% 50%;
     transform: rotate(360deg);
   }
-} 
+}
-- 
GitLab