Alert tag animate (#2209)

* fix alert animation

* improve code

components/alert/index.jsx

@@ -81,7 +81,7 @@ export default class Alert extends React.Component {
     return this.state.closed ? null : (
       <Animate component=""
         showProp="data-show"
-        transitionName="slide-up"
+        transitionName={`${prefixCls}-slide-up`}
         onEnd={this.animationEnd}
       >
         <div data-show={this.state.closing} className={alertCls}>

components/alert/style/index.less

@@ -121,14 +121,43 @@
     display: block;
   }
 
-  &-close {
-    height: 0;
-    opacity: 0;
+  &&-close {
+    height: 0 !important;
     margin: 0;
     padding-top: 0;
     padding-bottom: 0;
-    transition: all .3s @ease-in-out;
+    transition: all .3s @ease-in-out-circ;
     transform-origin: 50% 0;
-    animation-timing-function: @ease-in-out !important;
+  }
+
+  &-slide-up-leave {
+    animation: antAlertSlideUpOut .3s @ease-in-out-circ;
+    animation-fill-mode: both;
+  }
+}
+
+@keyframes antAlertSlideUpIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+}
+
+@keyframes antAlertSlideUpOut {
+  0% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
   }
 }

components/icon/index.jsx

@@ -3,5 +3,5 @@ import React from 'react';
 export default props => {
   let { type, className = '', ...other } = props;
   className += ` anticon anticon-${type}`;
-  return <i className={className} {...other} />;
+  return <i className={className.trim()} {...other} />;
 };

components/tag/style/index.less

@@ -94,7 +94,7 @@
   }
 
   &-zoom-leave {
-    animation: antZoomOut .2s @ease-in-out-circ;
+    animation: antZoomOut .3s @ease-in-out-circ;
     animation-fill-mode: both;
   }
 }