animation for popover

style/core/motion.less

 .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);
   }
-} 
+}