add tag and uploadlist motion

components/tag/index.jsx

@@ -2,12 +2,14 @@ import React from 'react';
 const prefixCls = 'ant-tag';
 import { transitionEndEvent, addEventListenerOnce } from '../util/index';
 
+import Animate from 'rc-animate';
+
 class AntTag extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      closing: false,
+      closing: true,
       closed: false
     };
   }
@@ -18,16 +20,17 @@ class AntTag extends React.Component {
     // It's Magic Code, don't know why
     dom.style.width = dom.offsetWidth + 'px';
     this.setState({
-      closing: true
-    });
-    addEventListenerOnce(dom, transitionEndEvent, () => {
-      this.setState({
-        closed: true,
-        closing: false
-      });
+      closing: false
     });
+
     this.props.onClose.call(this, e);
   }
+  animationEnd() {
+    this.setState({
+      closed: true,
+      closing: true
+    });
+  }
 
   render() {
     let close = this.props.closable ?
@@ -35,13 +38,19 @@ class AntTag extends React.Component {
     let colorClass = this.props.color ? this.props.prefixCls + '-' + this.props.color : '';
 
     let className = this.props.prefixCls + ' ' + colorClass;
-    className = this.state.closing ? className + ' ' + this.props.prefixCls + '-close' : className;
-
-    return (this.state.closed && !this.state.closing) ? null
-      : <div className={className}>
+    className = !this.state.closing ? className + ' ' + this.props.prefixCls + '-close' : className;
+
+    return this.state.closed ? null
+      : <Animate
+      component=""
+      showProp='data-show'
+      transitionName="zoom-tag"
+      onEnd={this.animationEnd.bind(this)}>
+      <div data-show={this.state.closing} className={className}>
           <a className={this.props.prefixCls + '-text'} {...this.props} />
           {close}
-        </div>;
+        </div>
+      </Animate>;
   }
 }
 

components/upload/uploadList.jsx

 import React from 'react';
 import getFileItem from './getFileItem';
 const prefixCls = 'ant-upload';
+import Animate from 'rc-animate';
 
 export default React.createClass({
   getDefaultProps() {
@@ -21,7 +22,6 @@ export default React.createClass({
     }
   },
   handleClose(file) {
-    console.log(file.uid, file.id);
     let matchWay = (!file.uid) ? 'byName' : 'byUid';
     let items = this.state.items;
     let removeItem = getFileItem(file, items);
@@ -41,10 +41,14 @@ export default React.createClass({
           {statusIcon}
           <b className={prefixCls + '-item-name'}>{file.filename}</b>
           <i className="anticon anticon-cross" ref="theCloseBtn"
-             onClick={this.handleClose.bind(this, file)}></i>
+            onClick={this.handleClose.bind(this, file)}></i>
         </div>
       );
     };
-    return <div className={prefixCls + '-list'}>{items.map(downloadItem)}</div>;
+    return (<div className={prefixCls + '-list'}>
+      <Animate transitionName='m-top'>
+      {items.map(downloadItem)}
+      </Animate>
+    </div>);
   }
 });

style/components/tag.less

@@ -73,10 +73,12 @@
   }
 
   &-close {
-    transform: scale(0);
+
     width: 0 !important;
-    opacity: 0 !important;
     padding: 0;
     margin-right: 0;
   }
 }
+.zoom-tag-leave{
+  animation: zoomOut .3s @ease-in-out-circ;
+}

style/components/upload.less

@@ -71,6 +71,7 @@
 .@{upload-prefix-cls}-list {
   margin-left: 4px;
   margin-top: 8px;
+  overflow: hidden;
   .@{upload-prefix-cls}-list-item {
     margin-bottom: 4px;
     height: 22px;
@@ -99,3 +100,23 @@
     font-weight: bold;
   }
 }
+
+.m-top-enter{
+  animation:marginTopIn .3s  @ease-in-out-circ;
+}
+.m-top-leave{
+  animation:marginTopOut .3s @ease-in-out-circ;
+}
+@keyframes marginTopIn {
+  from{
+    margin-top: -25px;
+    opacity: 0;
+  }
+}
+
+@keyframes marginTopOut {
+  to{
+    margin-top: -25px;
+    opacity: 0;
+  }
+}