From 73d89f46affbf137957540705c90361a633822e8 Mon Sep 17 00:00:00 2001
From: yiminghe <yiminghe@gmail.com>
Date: Mon, 15 Jun 2015 21:18:08 +0800
Subject: [PATCH] update motion

---
 components/dropdown/index.jsx  |    2 +-
 components/dropdown/index.md   |    1 -
 components/modal/confirm.jsx   |    2 +-
 components/modal/index.jsx     |    2 +-
 components/select/index.jsx    |    7 +-
 package.json                   |    8 +-
 style/components/dropdown.less |    4 +
 style/components/tooltip.less  |    4 +
 style/core/motion.less         | 1856 ++------------------------------
 9 files changed, 86 insertions(+), 1800 deletions(-)

diff --git a/components/dropdown/index.jsx b/components/dropdown/index.jsx
index c79598d3d7..4d02998474 100644
--- a/components/dropdown/index.jsx
+++ b/components/dropdown/index.jsx
@@ -6,7 +6,7 @@ var Dropdown = require('rc-dropdown');
 module.exports = React.createClass({
   getDefaultProps: function() {
     return {
-      animation: 'slide-up',
+      transitionName: 'slide-up',
       prefixCls: 'ant-dropdown'
     };
   },
diff --git a/components/dropdown/index.md b/components/dropdown/index.md
index fe0a272d67..14f9710daf 100644
--- a/components/dropdown/index.md
+++ b/components/dropdown/index.md
@@ -18,7 +18,6 @@
 
 | 成员        | 说明           | 类型               | 默认值       |
 |-------------|----------------|--------------------|--------------|
-| animation   | 动画名称       | String             | slide-up     |
 | trigger     | 触发下来行为   | "click" or "hover" | hover        |
 | overlay     | 菜单节点       | React.Element      | 无           |
 
diff --git a/components/modal/confirm.jsx b/components/modal/confirm.jsx
index 5a8ebbe7c0..0a03831631 100644
--- a/components/modal/confirm.jsx
+++ b/components/modal/confirm.jsx
@@ -8,7 +8,7 @@ module.exports = function (props) {
   var d;
   props = props || {};
   props.iconClassName = props.iconClassName || 'anticon-exclamation-circle';
-  props.animation = 'zoom';
+  props.transitionName = 'zoom';
   props.maskAnimation = 'fade';
   var width = props.width || 375;
 
diff --git a/components/modal/index.jsx b/components/modal/index.jsx
index ae75313d0b..8936bc140f 100644
--- a/components/modal/index.jsx
+++ b/components/modal/index.jsx
@@ -46,7 +46,7 @@ var Modal = React.createClass({
       <button type="button" className="ant-btn-default ant-btn" onClick={this.handleCancel}>取 消</button>,
       <button type="button" className="ant-btn-primary ant-btn" onClick={this.handleOk}>确 定</button>
     ];
-    return <Dialog animation="zoom" onBeforeClose={props.onCancel} visible={this.state.visible} maskAnimation="fade" width="500" footer={footer} {...props} ref="d"/>;
+    return <Dialog transitionName="zoom" onBeforeClose={props.onCancel} visible={this.state.visible} maskAnimation="fade" width="500" footer={footer} {...props} ref="d"/>;
   }
 });
 
diff --git a/components/select/index.jsx b/components/select/index.jsx
index 7c4dbbe1da..760b34bcb1 100644
--- a/components/select/index.jsx
+++ b/components/select/index.jsx
@@ -4,12 +4,13 @@ var React = require('react');
 var Select = require('rc-select');
 
 module.exports = React.createClass({
-  getDefaultProps: function() {
+  getDefaultProps: function () {
     return {
-      prefixCls: 'ant-select'
+      prefixCls: 'ant-select',
+      transitionName: 'slide-up'
     };
   },
-  render: function() {
+  render: function () {
     return (
       <Select {...this.props} />
     );
diff --git a/package.json b/package.json
index 5d2c615049..e15493342f 100644
--- a/package.json
+++ b/package.json
@@ -15,13 +15,13 @@
     "gregorian-calendar": "~3.0.0",
     "gregorian-calendar-format": "~3.0.1",
     "rc-calendar": "~3.9.0",
-    "rc-dialog": "~4.3.1",
-    "rc-dropdown": "~1.0.1",
+    "rc-dialog": "~4.3.2",
+    "rc-dropdown": "~1.0.2",
     "rc-menu": "~3.3.0",
     "rc-progress": "~1.0.0",
-    "rc-select": "~3.3.5",
+    "rc-select": "~3.4.1",
     "rc-tabs": "~5.1.0",
-    "rc-tooltip": "~2.1.0"
+    "rc-tooltip": "~2.1.1"
   },
   "devDependencies": {
     "babel-core": "~5.4.7",
diff --git a/style/components/dropdown.less b/style/components/dropdown.less
index 92ce74f1b7..bfecc9d577 100644
--- a/style/components/dropdown.less
+++ b/style/components/dropdown.less
@@ -17,6 +17,10 @@
     position: relative;
   }
 
+  &-hidden {
+    display: none;
+  }
+
   &-menu {
     outline: none;
     position: relative;
diff --git a/style/components/tooltip.less b/style/components/tooltip.less
index 78fa1c9187..b70dd187b9 100644
--- a/style/components/tooltip.less
+++ b/style/components/tooltip.less
@@ -31,6 +31,10 @@
   font-size: @font-size-base;
   line-height: @line-height-base;
   opacity: @tooltip-opacity;
+  
+  &-hidden {
+    display: none;
+  }
 
   &-placement-top    { padding: @tooltip-arrow-width 0 @tooltip-distance 0; }
   &-placement-right  { padding: 0 @tooltip-arrow-width 0 @tooltip-distance; }
diff --git a/style/core/motion.less b/style/core/motion.less
index c5651b6387..2bf00bc8b7 100644
--- a/style/core/motion.less
+++ b/style/core/motion.less
@@ -1,557 +1,36 @@
-// 动画效果
-// 组成： 1. 单个动画效果
-//       2. 动画串联
-//       3. 自定义动画
-
-// Fade - 透明度从 0 到 1，从 1 到 0
-.fade {
-  -webkit-animation-timing-function: @ease-in;
-  -webkit-animation-duration: @duration-600;
-  animation-timing-function: @ease-in;
-  animation-duration: @duration-600;
-
-  &.ng-enter,
-  &.fade-add,
-  &.ng-hide-remove,
-  &.ng-move {
-    -webkit-animation-name: fadeIn;
-    animation-name: fadeIn;
-
-  }
-
-  &.ng-leave,
-  &.fade-remove,
-  &.ng-hide {
-    -webkit-animation-name: fadeOut;
-    animation-name: fadeOut;
-
-  }
-
-  &.ng-enter {
-    -webkit-animation-name: fadeIn;
-    -webkit-animation-play-state: paused;
-    animation-name: fadeIn;
-    animation-play-state: paused;
-    &.ng-enter-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-
-  &.ng-leave {
-    -webkit-animation-name: fadeOut;
-    -webkit-animation-play-state: paused;
-    animation-name: fadeOut;
-    animation-play-state: paused;
-    &.ng-leave-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-
-}
-
-@-webkit-keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity:1;
-  }
-}
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 1;
-  }
-}
-
-@-webkit-keyframes fadeOut {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-@keyframes fadeOut {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-
-// zoom - 从中心点放大、缩小
-.zoom {
-  -webkit-animation-timing-function: @ease-in;
-  -webkit-animation-fill-mode: backwards;
-  -webkit-animation-duration: @duration-600;
-  animation-timing-function: @ease-in;
-  animation-fill-mode: backwards;
-  animation-duration: @duration-600;
-
-  &.ng-enter,
-  &.zoom-add,
-  &.ng-hide-remove,
-  &.ng-move {
-    -webkit-animation-name: zoomIn;
-    animation-name: zoomIn;
-  }
-
-  &.ng-leave,
-  &.zoom-remove,
-  &.ng-hide {
-    -webkit-animation-name: zoomOut;
-    animation-name: zoomOut;
-  }
-
-  &.ng-enter {
-    -webkit-animation-name: zoomIn;
-    -webkit-animation-play-state: paused;
-    animation-name: zoomIn;
-    animation-play-state: paused;
-    &.ng-enter-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-
-  &.ng-leave {
-    -webkit-animation-name: zoomOut;
-    -webkit-animation-play-state: paused;
-    animation-name: zoomOut;
-    animation-play-state: paused;
-    &.ng-leave-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-}
-
-.zoom-left {
-  -webkit-animation-timing-function: @ease-in-out;
-  -webkit-animation-fill-mode: backwards;
-  -webkit-animation-duration: @duration-500;
-  animation-timing-function: @ease-in-out;
-  animation-fill-mode: backwards;
-  animation-duration: @duration-500;
-
-  &.ng-enter,
-  &.zoom-left-add,
-  &.ng-hide-remove,
-  &.ng-move {
-    -webkit-animation-name: zoomLeft;
-    animation-name: zoomLeft;
-  }
-
-  &.ng-leave,
-  &.zoom-left-remove,
-  &.ng-hide {
-    -webkit-animation-name: zoomLeftOut;
-    animation-name: zoomLeftOut;
-  }
-
-  &.ng-enter {
-    -webkit-animation-name: zoomLeft;
-    -webkit-animation-play-state: paused;
-    animation-name: zoomLeft;
-    animation-play-state: paused;
-    &.ng-enter-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-
-  &.ng-leave {
-    -webkit-animation-name: zoomLeftOut;
-    -webkit-animation-play-state: paused;
-    animation-name: zoomLeftOut;
-    animation-play-state: paused;
-    &.ng-leave-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-}
-.zoom-right {
-  -webkit-animation-timing-function: @ease-in-out;
-  -webkit-animation-fill-mode: backwards;
-  -webkit-animation-duration: @duration-500;
-  animation-timing-function: @ease-in-out;
-  animation-fill-mode: backwards;
-  animation-duration: @duration-500;
-
-  &.ng-enter,
-  &.zoom-right-add,
-  &.ng-hide-remove,
-  &.ng-move {
-    -webkit-animation-name: zoomRight;
-    animation-name: zoomRight;
-  }
-
-  &.ng-leave,
-  &.zoom-right-remove,
-  &.ng-hide {
-    -webkit-animation-name: zoomRightOut;
-    animation-name: zoomRightOut;
-  }
-
-  &.ng-enter {
-    -webkit-animation-name: zoomRight;
-    -webkit-animation-play-state: paused;
-    animation-name: zoomRight;
-    animation-play-state: paused;
-    &.ng-enter-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-
-  &.ng-leave {
-    -webkit-animation-name: zoomRightOut;
-    -webkit-animation-play-state: paused;
-    animation-name: zoomRightOut;
-    animation-play-state: paused;
-    &.ng-leave-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-}
-
-.zoom-up {
-  -webkit-animation-timing-function: @ease-in-out;
-  -webkit-animation-fill-mode: backwards;
-  -webkit-animation-duration: @duration-500;
-  animation-timing-function: @ease-in-out;
-  animation-fill-mode: backwards;
-  animation-duration: @duration-500;
-
-  &.ng-enter,
-  &.zoom-up-add,
-  &.ng-hide-remove,
-  &.ng-move {
-    -webkit-animation-name: zoomUp;
-    animation-name: zoomUp;
-  }
-
-  &.ng-leave,
-  &.zoom-up-remove,
-  &.ng-hide {
-    -webkit-animation-name: zoomUpOut;
-    animation-name: zoomUpOut;
-  }
-
-  &.ng-enter {
-    -webkit-animation-name: zoomUp;
-    -webkit-animation-play-state: paused;
-    animation-name: zoomUp;
-    animation-play-state: paused;
-    &.ng-enter-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-
-  &.ng-leave {
-    -webkit-animation-name: zoomUpOut;
-    -webkit-animation-play-state: paused;
-    animation-name: zoomUpOut;
-    animation-play-state: paused;
-    &.ng-leave-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-}
-
-.zoom-down {
-  -webkit-animation-timing-function: @ease-in-out;
-  -webkit-animation-fill-mode: backwards;
-  -webkit-animation-duration: @duration-500;
-  animation-timing-function: @ease-in-out;
-  animation-fill-mode: backwards;
-  animation-duration: @duration-500;
-
-  &.ng-enter,
-  &.zoom-down-add,
-  &.ng-hide-remove,
-  &.ng-move {
-    -webkit-animation-name: zoomDown;
-    animation-name: zoomDown;
-  }
-
-  &.ng-leave,
-  &.zoom-down-remove,
-  &.ng-hide {
-    -webkit-animation-name: zoomDownOut;
-    animation-name: zoomDownOut;
-  }
-
-  &.ng-enter {
-    -webkit-animation-name: zoomDown;
-    -webkit-animation-play-state: paused;
-    animation-name: zoomDown;
-    animation-play-state: paused;
-    &.ng-enter-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-
-  &.ng-leave {
-    -webkit-animation-name: zoomDownOut;
-    -webkit-animation-play-state: paused;
-    animation-name: zoomDownOut;
-    animation-play-state: paused;
-    &.ng-leave-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-}
-
-.zoom-arr12 {
-  -webkit-animation-timing-function: @ease-in;
-  -webkit-animation-fill-mode: backwards;
-  -webkit-animation-duration: @duration-500;
-  animation-timing-function: @ease-in;
-  animation-fill-mode: backwards;
-  animation-duration: @duration-500;
-
-  &.ng-enter,
-  &.zoom-arr12-add,
-  &.ng-hide-remove,
-  &.ng-move {
-    -webkit-animation-name: zoomArr12;
-    animation-name: zoomArr12;
-  }
-
-  &.ng-enter {
-    -webkit-animation-name: zoomArr12;
-    -webkit-animation-play-state: paused;
-    animation-name: zoomArr12;
-    animation-play-state: paused;
-    &.ng-enter-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-
-}
-.zoom-arr1 {
-  -webkit-animation-timing-function: @ease-in;
-  -webkit-animation-fill-mode: backwards;
-  -webkit-animation-duration: @duration-500;
-  animation-timing-function: @ease-in;
-  animation-fill-mode: backwards;
-  animation-duration: @duration-500;
-
-  &.ng-enter,
-  &.zoom-arr1-add,
-  &.ng-hide-remove,
-  &.ng-move {
-    -webkit-animation-name: zoomArr1;
-    animation-name: zoomArr1;
-  }
-
-  &.ng-enter {
-    -webkit-animation-name: zoomArr1;
-    -webkit-animation-play-state: paused;
-    animation-name: zoomArr1;
-    animation-play-state: paused;
-    &.ng-enter-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-
+.effect() {
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  display: block !important;
 }
-.zoom-arr3 {
-  -webkit-animation-timing-function: @ease-in;
-  -webkit-animation-fill-mode: backwards;
-  -webkit-animation-duration: @duration-500;
-  animation-timing-function: @ease-in;
-  animation-fill-mode: backwards;
-  animation-duration: @duration-500;
-
-  &.ng-enter,
-  &.zoom-arr3-add,
-  &.ng-hide-remove,
-  &.ng-move {
-    -webkit-animation-name: zoomArr3;
-    animation-name: zoomArr3;
-  }
-
-  &.ng-enter {
-    -webkit-animation-name: zoomArr3;
-    -webkit-animation-play-state: paused;
-    animation-name: zoomArr3;
-    animation-play-state: paused;
-    &.ng-enter-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-
-}
-.zoom-arr5 {
-  -webkit-animation-timing-function: @ease-in;
-  -webkit-animation-fill-mode: backwards;
-  -webkit-animation-duration: @duration-500;
-  animation-timing-function: @ease-in;
-  animation-fill-mode: backwards;
-  animation-duration: @duration-500;
-
-  &.ng-enter,
-  &.zoom-arr5-add,
-  &.ng-hide-remove,
-  &.ng-move {
-    -webkit-animation-name: zoomArr5;
-    animation-name: zoomArr5;
-  }
-
-  &.ng-enter {
-    -webkit-animation-name: zoomArr5;
-    -webkit-animation-play-state: paused;
-    animation-name: zoomArr5;
-    animation-play-state: paused;
-    &.ng-enter-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
 
+.zoom-enter, .zoom-leave {
+  display: block;
 }
-.zoom-arr6 {
-  -webkit-animation-timing-function: @ease-in;
-  -webkit-animation-fill-mode: backwards;
-  -webkit-animation-duration: @duration-500;
-  animation-timing-function: @ease-in;
-  animation-fill-mode: backwards;
-  animation-duration: @duration-500;
-
-  &.ng-enter,
-  &.zoom-arr6-add,
-  &.ng-hide-remove,
-  &.ng-move {
-    -webkit-animation-name: zoomArr6;
-    animation-name: zoomArr6;
-  }
 
-  &.ng-enter {
-    -webkit-animation-name: zoomArr6;
-    -webkit-animation-play-state: paused;
-    animation-name: zoomArr6;
-    animation-play-state: paused;
-    &.ng-enter-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
+.zoom-enter {
+  opacity: 0;
+  .effect();
+  animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
+  animation-play-state: paused;
 }
-.zoom-arr7 {
-  -webkit-animation-timing-function: @ease-in;
-  -webkit-animation-fill-mode: backwards;
-  -webkit-animation-duration: @duration-500;
-  animation-timing-function: @ease-in;
-  animation-fill-mode: backwards;
-  animation-duration: @duration-500;
-
-  &.ng-enter,
-  &.zoom-arr7-add,
-  &.ng-hide-remove,
-  &.ng-move {
-    -webkit-animation-name: zoomArr7;
-    animation-name: zoomArr7;
-  }
-
-  &.ng-enter {
-    -webkit-animation-name: zoomArr7;
-    -webkit-animation-play-state: paused;
-    animation-name: zoomArr7;
-    animation-play-state: paused;
-    &.ng-enter-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-
 
+.zoom-leave {
+  .effect();
+  animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
+  animation-play-state: paused;
 }
-.zoom-arr9 {
-  -webkit-animation-timing-function: @ease-in;
-  -webkit-animation-fill-mode: backwards;
-  -webkit-animation-duration: @duration-500;
-  animation-timing-function: @ease-in;
-  animation-fill-mode: backwards;
-  animation-duration: @duration-500;
-
-  &.ng-enter,
-  &.zoom-arr9-add,
-  &.ng-hide-remove,
-  &.ng-move {
-    -webkit-animation-name: zoomArr9;
-    animation-name: zoomArr9;
-  }
 
-  &.ng-enter {
-    -webkit-animation-name: zoomArr9;
-    -webkit-animation-play-state: paused;
-    animation-name: zoomArr9;
-    animation-play-state: paused;
-    &.ng-enter-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
+.zoom-enter.zoom-enter-active {
+  animation-name: zoomIn;
+  animation-play-state: running;
 }
-.zoom-arr11 {
-  -webkit-animation-timing-function: @ease-in;
-  -webkit-animation-fill-mode: backwards;
-  -webkit-animation-duration: @duration-500;
-  animation-timing-function: @ease-in;
-  animation-fill-mode: backwards;
-  animation-duration: @duration-500;
-
-  &.ng-enter,
-  &.zoom-arr11-add,
-  &.ng-hide-remove,
-  &.ng-move {
-    -webkit-animation-name: zoomArr11;
-    animation-name: zoomArr11;
-  }
-
-  &.ng-enter {
-    -webkit-animation-name: zoomArr11;
-    -webkit-animation-play-state: paused;
-    animation-name: zoomArr11;
-    animation-play-state: paused;
-    &.ng-enter-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
 
+.zoom-leave.zoom-leave-active {
+  animation-name: zoomOut;
+  animation-play-state: running;
 }
 
-@-webkit-keyframes zoomIn {
-  0% {
-    opacity: 0;
-    -webkit-transform-origin: 50% 50%;
-    -webkit-transform: scale(0, 0);
-  }
-  100% {
-    opacity: 1;
-    -webkit-transform-origin: 50% 50%;
-    -webkit-transform: scale(1, 1);
-  }
-}
 @keyframes zoomIn {
   0% {
     opacity: 0;
@@ -564,20 +43,6 @@
     transform: scale(1, 1);
   }
 }
-
-@-webkit-keyframes zoomOut {
-  0% {
-    opacity: 1;
-    -webkit-transform-origin: 50% 50%;
-    -webkit-transform: scale(1, 1);
-  }
-  100% {
-    opacity: 0;
-    -webkit-transform-origin: 50% 50%;
-    -webkit-transform: scale(0, 0);
-  }
-}
-
 @keyframes zoomOut {
   0% {
     opacity: 1;
@@ -591,117 +56,33 @@
   }
 }
 
-@-webkit-keyframes zoomLeft {
-  0% {
-    opacity: 0;
-    -webkit-transform-origin: 0% 0%;
-    -webkit-transform: scaleX(0);
-  }
-  100% {
-    opacity: 1;
-    -webkit-transform-origin: 0% 0%;
-    -webkit-transform: scaleX(1);
-  }
-}
-@keyframes zoomLeft {
-  0% {
-    opacity: 0;
-    transform-origin: 0% 0%;
-    transform: scaleX(0);
-  }
-  100% {
-    opacity: 1;
-    transform-origin: 0% 0%;
-    transform: scaleX(1);
-  }
+.slide-up-enter {
+  .effect();
+  transform-origin: 0 0;
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+  animation-play-state: paused;
 }
 
-@-webkit-keyframes zoomLeftOut {
-  0% {
-    opacity: 1;
-    -webkit-transform-origin: 0% 0%;
-    -webkit-transform: scaleX(1);
-  }
-  100% {
-    opacity: 0;
-    -webkit-transform-origin: 0% 0%;
-    -webkit-transform: scaleX(0);
-  }
-}
-@keyframes zoomLeftOut {
-  0% {
-    opacity: 1;
-    transform-origin: 0% 0%;
-    transform: scaleX(1);
-  }
-  100% {
-    opacity: 0;
-    transform-origin: 0% 0%;
-    transform: scaleX(0);
-  }
-}
-@-webkit-keyframes zoomRight {
-  0% {
-    opacity: 0;
-    -webkit-transform-origin: 100% 0%;
-    -webkit-transform: scaleX(0);
-  }
-  100% {
-    opacity: 1;
-    -webkit-transform-origin: 100% 0%;
-    -webkit-transform: scaleX(1);
-  }
-}
-@keyframes zoomRight {
-  0% {
-    opacity: 0;
-    transform-origin: 100% 0%;
-    transform: scaleX(0);
-  }
-  100% {
-    opacity: 1;
-    transform-origin: 100% 0%;
-    transform: scaleX(1);
-  }
+.slide-up-leave {
+  .effect();
+  transform-origin: 0 0;
+  opacity: 1;
+  animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+  animation-play-state: paused;
 }
 
-@-webkit-keyframes zoomRightOut {
-  0% {
-    opacity: 1;
-    -webkit-transform-origin: 100% 0%;
-    -webkit-transform: scaleX(1);
-  }
-  100% {
-    opacity: 0;
-    -webkit-transform-origin: 100% 0%;
-    -webkit-transform: scaleX(0);
-  }
-}
-@keyframes zoomRightOut {
-  0% {
-    opacity: 1;
-    transform-origin: 100% 0%;
-    transform: scaleX(1);
-  }
-  100% {
-    opacity: 0;
-    transform-origin: 100% 0%;
-    transform: scaleX(0);
-  }
+.slide-up-enter.slide-up-enter-active {
+  animation-name: slideUpIn;
+  animation-play-state: running;
 }
-@-webkit-keyframes zoomUp {
-  0% {
-    opacity: 0;
-    -webkit-transform-origin: 0% 0%;
-    -webkit-transform: scaleY(0);
-  }
-  100% {
-    opacity: 1;
-    -webkit-transform-origin: 0% 0%;
-    -webkit-transform: scaleY(1);
-  }
+
+.slide-up-leave.slide-up-leave-active {
+  animation-name: slideUpOut;
+  animation-play-state: running;
 }
-@keyframes zoomUp {
+
+@keyframes slideUpIn {
   0% {
     opacity: 0;
     transform-origin: 0% 0%;
@@ -713,20 +94,7 @@
     transform: scaleY(1);
   }
 }
-
-@-webkit-keyframes zoomUpOut {
-  0% {
-    opacity: 1;
-    -webkit-transform-origin: 0% 0%;
-    -webkit-transform: scaleY(1);
-  }
-  100% {
-    opacity: 0;
-    -webkit-transform-origin: 0% 0%;
-    -webkit-transform: scaleY(0);
-  }
-}
-@keyframes zoomUpOut {
+@keyframes slideUpOut {
   0% {
     opacity: 1;
     transform-origin: 0% 0%;
@@ -739,1134 +107,44 @@
   }
 }
 
-@-webkit-keyframes zoomDown {
-  0% {
-    opacity: 0;
-    -webkit-transform-origin: 100% 100%;
-    -webkit-transform: scaleY(0);
-  }
-  100% {
-    opacity: 1;
-    -webkit-transform-origin: 100% 100%;
-    -webkit-transform: scaleY(1);
-  }
+.fade-enter {
+  opacity: 0;
+  .effect();
+  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
+  animation-play-state: paused;
+}
+
+.fade-leave {
+  .effect();
+  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
+  animation-play-state: paused;
+}
+
+.fade-enter.fade-enter-active {
+  animation-name: fadeIn;
+  animation-play-state: running;
+}
+
+.fade-leave.fade-leave-active {
+  animation-name: fadeOut;
+  animation-play-state: running;
 }
-@keyframes zoomDown {
+
+@keyframes fadeIn {
   0% {
     opacity: 0;
-    transform-origin: 100% 100%;
-    transform: scaleY(0);
   }
   100% {
     opacity: 1;
-    transform-origin: 100% 100%;
-    transform: scaleY(1);
   }
 }
 
-@-webkit-keyframes zoomDownOut {
-  0% {
-    opacity: 1;
-    -webkit-transform-origin: 100% 100%;
-    -webkit-transform: scaleY(1);
-  }
-  100% {
-    opacity: 0;
-    -webkit-transform-origin: 100% 100%;
-    -webkit-transform: scaleY(0);
-  }
-}
-@keyframes zoomDownOut {
+@keyframes fadeOut {
   0% {
     opacity: 1;
-    transform-origin: 100% 100%;
-    transform: scaleY(1);
   }
   100% {
     opacity: 0;
-    transform-origin: 100% 100%;
-    transform: scaleY(0);
   }
 }
 
-@-webkit-keyframes zoomArr12 {
-  0% {
-    opacity: 0;
-    -webkit-transform-origin: 50% 0%;
-    -webkit-transform: scale(0, 0);
-  }
-  100% {
-    opacity: 1;
-    -webkit-transform-origin: 50% 0%;
-    -webkit-transform: scale(1, 1);
-  }
-}
-@keyframes zoomArr12 {
-  0% {
-    opacity: 0;
-    transform-origin: 50% 0%;
-    transform: scale(0, 0);
-  }
-  100% {
-    opacity: 1;
-    transform-origin: 50% 0%;
-    transform: scale(1, 1);
-  }
-}
-@-webkit-keyframes zoomArr1 {
-  0% {
-    opacity: 0;
-    -webkit-transform-origin: 100% 0%;
-    -webkit-transform: scale(0, 0);
-  }
-  100% {
-    opacity: 1;
-    -webkit-transform-origin: 100% 0%;
-    -webkit-transform: scale(1, 1);
-  }
-}
-@keyframes zoomArr1 {
-  0% {
-    opacity: 0;
-    transform-origin: 100% 0%;
-    transform: scale(0, 0);
-  }
-  100% {
-    opacity: 1;
-    transform-origin: 100% 0%;
-    transform: scale(1, 1);
-  }
-}
-@-webkit-keyframes zoomArr3 {
-  0% {
-    opacity: 0;
-    -webkit-transform-origin: 100% 50%;
-    -webkit-transform: scale(0, 0);
-  }
-  100% {
-    opacity: 1;
-    -webkit-transform-origin: 100% 50%;
-    -webkit-transform: scale(1, 1);
-  }
-}
-@keyframes zoomArr3 {
-  0% {
-    opacity: 0;
-    transform-origin: 100% 50%;
-    transform: scale(0, 0);
-  }
-  100% {
-    opacity: 1;
-    transform-origin: 100% 50%;
-    transform: scale(1, 1);
-  }
-}
-@-webkit-keyframes zoomArr5 {
-  0% {
-    opacity: 0;
-    -webkit-transform-origin: 100% 100%;
-    -webkit-transform: scale(0, 0);
-  }
-  100% {
-    opacity: 1;
-    -webkit-transform-origin: 100% 100%;
-    -webkit-transform: scale(1, 1);
-  }
-}
-@keyframes zoomArr5 {
-  0% {
-    opacity: 0;
-    transform-origin: 100% 100%;
-    transform: scale(0, 0);
-  }
-  100% {
-    opacity: 1;
-    transform-origin: 100% 100%;
-    transform: scale(1, 1);
-  }
-}
-@-webkit-keyframes zoomArr6 {
-  0% {
-    opacity: 0;
-    -webkit-transform-origin: 50% 100%;
-    -webkit-transform: scale(0, 0);
-  }
-  100% {
-    opacity: 1;
-    -webkit-transform-origin: 50% 100%;
-    -webkit-transform: scale(1, 1);
-  }
-}
-@keyframes zoomArr6 {
-  0% {
-    opacity: 0;
-    transform-origin: 50% 100%;
-    transform: scale(0, 0);
-  }
-  100% {
-    opacity: 1;
-    transform-origin: 50% 100%;
-    transform: scale(1, 1);
-  }
-}
-@-webkit-keyframes zoomArr7 {
-  0% {
-    opacity: 0;
-    -webkit-transform-origin: 0% 100%;
-    -webkit-transform: scale(0, 0);
-  }
-  100% {
-    opacity: 1;
-    -webkit-transform-origin: 0% 100%;
-    -webkit-transform: scale(1, 1);
-  }
-}
-@keyframes zoomArr7 {
-  0% {
-    opacity: 0;
-    transform-origin: 0% 100%;
-    transform: scale(0, 0);
-  }
-  100% {
-    opacity: 1;
-    transform-origin: 0% 100%;
-    transform: scale(1, 1);
-  }
-}
-@-webkit-keyframes zoomArr9 {
-  0% {
-    opacity: 0;
-    -webkit-transform-origin: 0% 50%;
-    -webkit-transform: scale(0, 0);
-  }
-  100% {
-    opacity: 1;
-    -webkit-transform-origin: 0% 50%;
-    -webkit-transform: scale(1, 1);
-  }
-}
-@keyframes zoomArr9 {
-  0% {
-    opacity: 0;
-    transform-origin: 0% 50%;
-    transform: scale(0, 0);
-  }
-  100% {
-    opacity: 1;
-    transform-origin: 0% 50%;
-    transform: scale(1, 1);
-  }
-}
-@-webkit-keyframes zoomArr11 {
-  0% {
-    opacity: 0;
-    -webkit-transform-origin: 0% 0%;
-    -webkit-transform: scale(0, 0);
-  }
-  100% {
-    opacity: 1;
-    -webkit-transform-origin: 0% 0%;
-    -webkit-transform: scale(1, 1);
-  }
-}
-@keyframes zoomArr11 {
-  0% {
-    opacity: 0;
-    transform-origin: 0% 0%;
-    transform: scale(0, 0);
-  }
-  100% {
-    opacity: 1;
-    transform-origin: 0% 0%;
-    transform: scale(1, 1);
-  }
-}
-// puff - 从本身放大、缩小
-.puff {
-  -webkit-animation-timing-function: @ease-in;
-  -webkit-animation-fill-mode: backwards;
-  -webkit-animation-duration: @duration-500;
-  animation-timing-function: @ease-in;
-  animation-fill-mode: backwards;
-  animation-duration: @duration-500;
-
-  &.ng-enter,
-  &.puff-add,
-  &.ng-hide-remove,
-  &.ng-move {
-    -webkit-animation-name: puffIn;
-    animation-name: puffIn;
-  }
-
-  &.ng-leave,
-  &.puff-remove,
-  &.ng-hide {
-    -webkit-animation-name: puffOut;
-        animation-name: puffOut;
-  }
-
-  &.ng-enter {
-    -webkit-animation-name: puffIn;
-    -webkit-animation-play-state: paused;
-    animation-name: puffIn;
-    animation-play-state: paused;
-    &.ng-enter-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-
-  &.ng-leave {
-    -webkit-animation-name: puffOut;
-    -webkit-animation-play-state: paused;
-    animation-name: puffOut;
-    animation-play-state: paused;
-    &.ng-leave-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-}
-
-@-webkit-keyframes puffIn {
-  0% {
-    opacity: 0;
-    -webkit-transform-origin: 50% 50%;
-    -webkit-transform: scale(2, 2);
-    -webkit-filter: blur(2px);
-  }
-  100% {
-    opacity: 1;
-    -webkit-transform-origin: 50% 50%;
-    -webkit-transform: scale(1, 1);
-    -webkit-filter: blur(0px);
-  }
-}
-@keyframes puffIn {
-  0% {
-    opacity: 0;
-    transform-origin: 50% 50%;
-    transform: scale(2, 2);
-    filter: blur(2px);
-  }
-  100% {
-    opacity: 1;
-    transform-origin: 50% 50%;
-    transform: scale(1, 1);
-    filter: blur(0px);
-  }
-}
-
-@-webkit-keyframes puffOut {
-  0% {
-    opacity: 1;
-    -webkit-transform-origin: 50% 50%;
-    -webkit-transform: scale(1, 1);
-    -webkit-filter: blur(0px);
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform-origin: 50% 50%;
-    -webkit-transform: scale(2, 2);
-    -webkit-filter: blur(2px);
-  }
-}
-
-@keyframes puffOut {
-  0% {
-    opacity: 1;
-    transform-origin: 50% 50%;
-    transform: scale(1, 1);
-    -webkit-filter: blur(0px);
-  }
-
-  100% {
-    opacity: 0;
-    transform-origin: 50% 50%;
-    transform: scale(2, 2);
-    -webkit-filter: blur(2px);
-  }
-}
-
-// Rotate - 旋转
-.rotate-down {
-  -webkit-backface-visibility: visible !important;
-  backface-visibility: visible !important;
-  -webkit-animation-timing-function: @ease-out;
-  -webkit-animation-fill-mode: backwards;
-  -webkit-animation-duration: @duration-400;
-  animation-timing-function: @ease-out;
-  animation-fill-mode: backwards;
-  animation-duration: @duration-400;
-
-  &.ng-enter,
-  &.rotate-down-add,
-  &.ng-hide-remove,
-  &.ng-move {
-    -webkit-animation-name: rotateDown;
-    animation-name: rotateDown;
-  }
-
-  &.ng-leave,
-  &.rotate-down-remove,
-  &.ng-hide {
-    -webkit-animation-name: rotateDownOut;
-        animation-name: rotateDownOut;
-  }
-
-  &.ng-enter {
-    -webkit-animation-name: rotateDown;
-    -webkit-animation-play-state: paused;
-    animation-name: rotateDown;
-    animation-play-state: paused;
-    &.ng-enter-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-
-  &.ng-leave {
-    -webkit-animation-name: rotateDownOut;
-    -webkit-animation-play-state: paused;
-    animation-name: rotateDownOut;
-    animation-play-state: paused;
-    -webkit-animation-direction: reverse;
-    animation-direction: reverse;
-    &.ng-leave-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-
-}
-.rotate-up {
-  -webkit-backface-visibility: visible !important;
-  backface-visibility: visible !important;
-  -webkit-animation-timing-function: @ease-out;
-  -webkit-animation-fill-mode: backwards;
-  -webkit-animation-duration: @duration-400;
-  animation-timing-function: @ease-out;
-  animation-fill-mode: backwards;
-  animation-duration: @duration-400;
-
-  &.ng-enter,
-  &.rotate-up-add,
-  &.ng-hide-remove,
-  &.ng-move {
-    -webkit-animation-name: rotateUp;
-    animation-name: rotateUp;
-  }
-
-  &.ng-leave,
-  &.rotate-up-remove,
-  &.ng-hide {
-    -webkit-animation-name: rotateUpOut;
-        animation-name: rotateUpOut;
-  }
-
-  &.ng-enter {
-    -webkit-animation-name: rotateUp;
-    -webkit-animation-play-state: paused;
-    animation-name: rotateUp;
-    animation-play-state: paused;
-    &.ng-enter-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-  &.ng-leave {
-    -webkit-animation-name: rotateUpOut;
-    -webkit-animation-play-state: paused;
-    animation-name: rotateUpOut;
-    animation-play-state: paused;
-    &.ng-leave-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-}
-.rotate-left {
-  -webkit-backface-visibility: visible !important;
-  backface-visibility: visible !important;
-  -webkit-animation-timing-function: @ease-out;
-  -webkit-animation-fill-mode: backwards;
-  -webkit-animation-duration: @duration-400;
-  animation-timing-function: @ease-out;
-  animation-fill-mode: backwards;
-  animation-duration: @duration-400;
-
-  &.ng-enter,
-  &.rotate-left-add,
-  &.ng-hide-remove,
-  &.ng-move {
-    -webkit-animation-name: rotateLeft;
-    animation-name: rotateLeft;
-  }
-
-  &.ng-leave,
-  &.rotate-left-remove,
-  &.ng-hide {
-    -webkit-animation-name: rotateLeftOut;
-        animation-name: rotateLeftOut;
-  }
-
-  &.ng-enter {
-    -webkit-animation-name: rotateLeft;
-    -webkit-animation-play-state: paused;
-    animation-name: rotateLeft;
-    animation-play-state: paused;
-    &.ng-enter-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-
-  &.ng-leave {
-    -webkit-animation-name: rotateLeftOut;
-    -webkit-animation-play-state: paused;
-    animation-name: rotateLeftOut;
-    animation-play-state: paused;
-    &.ng-leave-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-}
-.rotate-right {
-  -webkit-backface-visibility: visible !important;
-  backface-visibility: visible !important;
-  -webkit-animation-timing-function: @ease-out;
-  -webkit-animation-fill-mode: backwards;
-  -webkit-animation-duration: @duration-400;
-  animation-timing-function: @ease-out;
-  animation-fill-mode: backwards;
-  animation-duration: @duration-400;
-
-  &.ng-enter,
-  &.rotate-right-add,
-  &.ng-hide-remove,
-  &.ng-move {
-    -webkit-animation-name: rotateRight;
-    animation-name: rotateRight;
-  }
-
-  &.ng-leave,
-  &.rotate-right-remove,
-  &.ng-hide {
-    -webkit-animation-name: rotateRightOut;
-        animation-name: rotateRightOut;
-  }
-
-  &.ng-enter {
-    -webkit-animation-name: rotateRight;
-    -webkit-animation-play-state: paused;
-    animation-name: rotateRight;
-    animation-play-state: paused;
-    &.ng-enter-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-
-  &.ng-leave {
-    -webkit-animation-name: rotateRightOut;
-    -webkit-animation-play-state: paused;
-    animation-name: rotateRightOut;
-    animation-play-state: paused;
-    &.ng-leave-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-}
-
-@-webkit-keyframes rotateDown {
-  0% {
-    opacity: 1;
-    -webkit-transform-origin: 0 0;
-    -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform-origin: 50% 100%;
-    -webkit-transform: perspective(800px) rotateX(-180deg) translateZ(300px);
-  }
-}
-@keyframes rotateDown {
-  0% {
-    opacity: 1;
-    transform-origin: 0 0;
-    transform: perspective(800px) rotateX(0deg) translateZ(0px);
-  }
-
-  100% {
-    opacity: 0;
-    transform-origin: 50% 100%;
-    transform: perspective(800px) rotateX(-180deg) translateZ(300px);
-  }
-}
-@-webkit-keyframes rotateDownOut {
-  0% {
-    opacity: 0;
-    -webkit-transform-origin: 50% 100%;
-    -webkit-transform: perspective(800px) rotateX(-180deg) translateZ(300px);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform-origin: 0 0;
-    -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
-  }
-}
-@keyframes rotateDownOut {
-  0% {
-    opacity: 0;
-    transform-origin: 50% 100%;
-    transform: perspective(800px) rotateX(-180deg) translateZ(300px);
-  }
-
-  100% {
-    opacity: 1;
-    transform-origin: 0 0;
-    transform: perspective(800px) rotateX(0deg) translateZ(0px);
-  }
-}
-
-@-webkit-keyframes rotateLeft {
-  0% {
-    opacity: 1;
-    -webkit-transform-origin: 0 0;
-    -webkit-transform: perspective(800px) rotateY(0deg) translateZ(0px);
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform-origin: 50% 0;
-    -webkit-transform: perspective(800px) rotateY(180deg) translateZ(300px);
-  }
-}
-@keyframes rotateLeft {
-  0% {
-    opacity: 1;
-    transform-origin: 0 0;
-    transform: perspective(800px) rotateY(0deg) translateZ(0px);
-  }
-
-  100% {
-    opacity: 0;
-    transform-origin: 50% 0;
-    transform: perspective(800px) rotateY(180deg) translateZ(300px);
-  }
-}
-@-webkit-keyframes rotateLeftOut {
-  0% {
-    opacity: 0;
-    -webkit-transform-origin: 50% 0;
-    -webkit-transform: perspective(800px) rotateY(180deg) translateZ(300px);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform-origin: 0 0;
-    -webkit-transform: perspective(800px) rotateY(0deg) translateZ(0px);
-  }
-}
-@keyframes rotateLeftOut {
-  0% {
-    opacity: 0;
-    transform-origin: 50% 0;
-    transform: perspective(800px) rotateY(180deg) translateZ(300px);
-  }
-
-  100% {
-    opacity: 1;
-    transform-origin: 0 0;
-    transform: perspective(800px) rotateY(0deg) translateZ(0px);
-  }
-}
-@-webkit-keyframes rotateRight {
-  0% {
-    opacity: 1;
-    -webkit-transform-origin: 0 0;
-    -webkit-transform: perspective(800px) rotateY(0deg) translate3d(0px);
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform-origin: 50% 0;
-    -webkit-transform: perspective(800px) rotateY(-180deg) translateZ(150px);
-  }
-}
-@keyframes rotateRight {
-  0% {
-    opacity: 1;
-    transform-origin: 0 0;
-    transform: perspective(800px) rotateY(0deg) translate3d(0px);
-  }
-
-  100% {
-    opacity: 0;
-    transform-origin: 50% 0;
-    transform: perspective(800px) rotateY(-180deg) translateZ(150px);
-  }
-}
-@-webkit-keyframes rotateRightOut {
-  0% {
-    opacity: 0;
-    -webkit-transform-origin: 50% 0;
-    -webkit-transform: perspective(800px) rotateY(-180deg) translateZ(150px);
-  }
-  100% {
-    opacity: 1;
-    -webkit-transform-origin: 0 0;
-    -webkit-transform: perspective(800px) rotateY(0deg) translate3d(0px);
-  }
-}
-@keyframes rotateRightOut {
-  0% {
-    opacity: 0;
-    transform-origin: 50% 0;
-    transform: perspective(800px) rotateY(-180deg) translateZ(150px);
-  }
-  100% {
-    opacity: 1;
-    transform-origin: 0 0;
-    transform: perspective(800px) rotateY(0deg) translate3d(0px);
-  }
-}
-@-webkit-keyframes rotateUp {
-  0% {
-    opacity: 1;
-    -webkit-transform-origin: 0 0;
-    -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform-origin: 50% 0;
-    -webkit-transform: perspective(800px) rotateX(180deg) translateZ(100px);
-  }
-}
-@keyframes rotateUp {
-  0% {
-    opacity: 1;
-    transform-origin: 0 0;
-    transform: perspective(800px) rotateX(0deg) translateZ(0px);
-  }
-
-  100% {
-    opacity: 0;
-    transform-origin: 50% 0;
-    transform: perspective(800px) rotateX(180deg) translateZ(100px);
-  }
-}
-@-webkit-keyframes rotateUpOut {
-  0% {
-    opacity: 0;
-    -webkit-transform-origin: 50% 0;
-    -webkit-transform: perspective(800px) rotateX(180deg) translateZ(100px);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform-origin: 0 0;
-    -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
-  }
-
-
-}
-@keyframes rotateUpOut {
-  0% {
-    opacity: 0;
-    transform-origin: 50% 0;
-    transform: perspective(800px) rotateX(180deg) translateZ(100px);
-  }
-
-  100% {
-    opacity: 1;
-    transform-origin: 0 0;
-    transform: perspective(800px) rotateX(0deg) translateZ(0px);
-  }
-
-}
-
-// Slide - 滑动
-.slide-down {
-  -webkit-animation-timing-function: @ease-in;
-  -webkit-animation-fill-mode: backwards;
-  -webkit-animation-duration: @duration-600;
-  animation-timing-function: @ease-in;
-  animation-fill-mode: backwards;
-  animation-duration: @duration-600;
-
-  &.ng-enter,
-  &.slide-down-add,
-  &.ng-hide-remove,
-  &.ng-move {
-    -webkit-animation-name: slideDown;
-    animation-name: slideDown;
-  }
-
-  &.ng-leave,
-  &.slide-down-remove,
-  &.ng-hide {
-    -webkit-animation-name: slideUp;
-        animation-name: slideUp;
-  }
-
-  &.ng-enter {
-    -webkit-animation-name: slideDown;
-    -webkit-animation-play-state: paused;
-    animation-name: slideDown;
-    animation-play-state: paused;
-    &.ng-enter-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-
-  &.ng-leave {
-    -webkit-animation-name: slideUp;
-    -webkit-animation-play-state: paused;
-    animation-name: slideUp;
-    animation-play-state: paused;
-    &.ng-leave-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-}
-.slide-left {
-  -webkit-animation-timing-function: @ease-in;
-  -webkit-animation-fill-mode: backwards;
-  -webkit-animation-duration: @duration-600;
-  animation-timing-function: @ease-in;
-  animation-fill-mode: backwards;
-  animation-duration: @duration-600;
-
-  &.ng-enter,
-  &.slide-left-add,
-  &.ng-hide-remove,
-  &.ng-move {
-    -webkit-animation-name: slideLeft;
-    animation-name: slideLeft;
-  }
-
-  &.ng-leave,
-  &.slide-left-remove,
-  &.ng-hide {
-    -webkit-animation-name: slideRight;
-        animation-name: slideRight;
-  }
-
-  &.ng-enter {
-    -webkit-animation-name: slideLeft;
-    -webkit-animation-play-state: paused;
-    animation-name: slideLeft;
-    animation-play-state: paused;
-    &.ng-enter-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-
-  &.ng-leave {
-    -webkit-animation-name: slideRight;
-    -webkit-animation-play-state: paused;
-    animation-name: slideRight;
-    animation-play-state: paused;
-    &.ng-leave-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-}
-.slide-right {
-  -webkit-animation-timing-function: @ease-in;
-  -webkit-animation-fill-mode: backwards;
-  -webkit-animation-duration: @duration-600;
-  animation-timing-function: @ease-in;
-  animation-fill-mode: backwards;
-  animation-duration: @duration-600;
-
-  &.ng-enter,
-  &.slide-right-add,
-  &.ng-hide-remove,
-  &.ng-move {
-    -webkit-animation-name: slideRight;
-    animation-name: slideRight;
-  }
-
-  &.ng-leave,
-  &.slide-right-remove,
-  &.ng-hide {
-    -webkit-animation-name: slideLeft;
-        animation-name: slideLeft;
-  }
-
-  &.ng-enter {
-    -webkit-animation-name: slideRight;
-    -webkit-animation-play-state: paused;
-    animation-name: slideRight;
-    animation-play-state: paused;
-    &.ng-enter-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-
-  &.ng-leave {
-    -webkit-animation-name: slideLeft;
-    -webkit-animation-play-state: paused;
-    animation-name: slideLeft;
-    animation-play-state: paused;
-    &.ng-leave-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-}
-.slide-up {
-  -webkit-animation-timing-function: @ease-in;
-  -webkit-animation-fill-mode: backwards;
-  -webkit-animation-duration: @duration-600;
-  animation-timing-function: @ease-in;
-  animation-fill-mode: backwards;
-  animation-duration: @duration-600;
-
-  &.ng-enter,
-  &.slide-up-add,
-  &.ng-hide-remove,
-  &.ng-move {
-    -webkit-animation-name: slideUp;
-    animation-name: slideUp;
-  }
-
-  &.ng-leave,
-  &.slide-up-remove,
-  &.ng-hide {
-    -webkit-animation-name: slideDown;
-        animation-name: slideDown;
-  }
-
-  &.ng-enter {
-    -webkit-animation-name: slideUp;
-    -webkit-animation-play-state: paused;
-    animation-name: slideUp;
-    animation-play-state: paused;
-    &.ng-enter-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-
-  &.ng-leave {
-    -webkit-animation-name: slideDown;
-    -webkit-animation-play-state: paused;
-    animation-name: slideDown;
-    animation-play-state: paused;
-    &.ng-leave-active {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-    }
-  }
-}
-
-@-webkit-keyframes slideDown {
-  0% {
-    -webkit-transform-origin: 0 0;
-    -webkit-transform: translateY(80%);
-  }
-
-  100% {
-    -webkit-transform-origin: 0 0;
-    -webkit-transform: translateY(0%);
-  }
-}
-@keyframes slideDown {
-  0% {
-    transform-origin: 0 0;
-    transform: translateY(80%);
-  }
-
-  100% {
-    transform-origin: 0 0;
-    transform: translateY(0%);
-  }
-}
-@-webkit-keyframes slideDownOut {
-  0% {
-    -webkit-transform-origin: 0 0;
-    -webkit-transform: translateY(0%);
-  }
-
-  100% {
-    -webkit-transform-origin: 0 0;
-    -webkit-transform: translateY(80%);
-  }
-
-}
-@keyframes slideDownOut {
-  0% {
-    transform-origin: 0 0;
-    transform: translateY(0%);
-  }
-  100% {
-    transform-origin: 0 0;
-    transform: translateY(80%);
-  }
-}
-
-@-webkit-keyframes slideLeft {
-  0% {
-    -webkit-transform-origin: 0 0;;
-    -webkit-transform: translateX(-80%);
-  }
-
-  100% {
-    -webkit-transform-origin: 0 0;
-    -webkit-transform: translateX(0%);
-  }
-}
-@keyframes slideLeft {
-  0% {
-    transform-origin: 0 0;
-    transform: translateX(-80%);
-  }
-
-  100% {
-    transform-origin: 0 0;
-    transform: translateX(0%);
-  }
-}
-@-webkit-keyframes slideLeftOut {
-  0% {
-    -webkit-transform-origin: 0 0;
-    -webkit-transform: translateX(0%);
-  }
-
-  100% {
-    -webkit-transform-origin: 0 0;;
-    -webkit-transform: translateX(-80%);
-  }
-}
-@keyframes slideLeftOut {
-  0% {
-    transform-origin: 0 0;
-    transform: translateX(0%);
-  }
-
-  100% {
-    transform-origin: 0 0;
-    transform: translateX(-80%);
-  }
-}
-@-webkit-keyframes slideRight {
-  0% {
-    -webkit-transform-origin: 0 0;
-    -webkit-transform: translateX(80%);
-  }
-
-  100% {
-    -webkit-transform-origin: 0 0;
-    -webkit-transform: translateX(0%);
-  }
-}
-@keyframes slideRight {
-  0% {
-    transform-origin: 0 0;
-    transform: translateX(80%);
-  }
-
-  100% {
-    transform-origin: 0 0;
-    transform: translateX(0%);
-  }
-}
-@-webkit-keyframes slideRightOut {
-  0% {
-    -webkit-transform-origin: 0 0;
-    -webkit-transform: translateX(0%);
-  }
-
-  100% {
-    -webkit-transform-origin: 0 0;
-    -webkit-transform: translateX(80%);
-  }
-}
-@keyframes slideRightOut {
-  0% {
-    transform-origin: 0 0;
-    transform: translateX(0%);
-  }
-
-  100% {
-    transform-origin: 0 0;
-    transform: translateX(80%);
-  }
-}
-@-webkit-keyframes slideUp {
-  0% {
-    -webkit-transform-origin: 0 0;
-    -webkit-transform: translateY(-80%);
-  }
-
-  100% {
-    -webkit-transform-origin: 0 0;
-    -webkit-transform: translateY(0%);
-  }
-}
-@keyframes slideUp {
-  0% {
-    transform-origin: 0 0;
-    transform: translateY(-80%);
-  }
-
-  100% {
-    transform-origin: 0 0;
-    transform: translateY(0%);
-  }
-}
-@-webkit-keyframes slideUpOut {
-  0% {
-    -webkit-transform-origin: 0 0;
-    -webkit-transform: translateY(0%);
-  }
-  100% {
-    -webkit-transform-origin: 0 0;
-    -webkit-transform: translateY(-80%);
-  }
-}
-@keyframes slideUpOut {
-  0% {
-    transform-origin: 0 0;
-    transform: translateY(0%);
-  }
-
-  100% {
-    transform-origin: 0 0;
-    transform: translateY(-80%);
-  }
-}
-@-webkit-keyframes loadingCircle {
-  0% {
-    -webkit-transform-origin: 50% 50%;
-    -webkit-transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform-origin: 50% 50%;
-    -webkit-transform: rotate(360deg);
-  }
-}
-@keyframes loadingCircle {
-  0% {
-    transform-origin: 50% 50%;
-    transform: rotate(0deg);
-  }
-  100% {
-    transform-origin: 50% 50%;
-    transform: rotate(360deg);
-  }
-}
\ No newline at end of file