add tree animation

components/tree/demo/basic.md

@@ -11,7 +11,7 @@ var Tree = antd.Tree;
 var TreeNode = Tree.TreeNode;
 
 React.render(
-  <Tree defaultExpandAll={true}>
+  <Tree defaultExpandAll={false}>
     <TreeNode title="parent 1">
       <TreeNode title="leaf" />
       <TreeNode title="parent 1-1">

components/tree/demo/checkbox.md

@@ -9,62 +9,13 @@
 ````jsx
 var Tree = antd.Tree;
 var TreeNode = Tree.TreeNode;
-var velocity = antd.velocity;
 
 function handleCheck(info) {
   console.log('check: ', info);
 }
 
-const animation = {
-  enter(node, done){
-    var ok = false;
-
-    function complete() {
-      if (!ok) {
-        ok = 1;
-        done();
-      }
-    }
-    node.style.display='none';
-    velocity(node, 'slideDown', {
-      duration: 300,
-      complete: complete
-    });
-    return {
-      stop: function () {
-        velocity(node, 'finish');
-        // velocity complete is async
-        complete();
-      }
-    };
-  },
-
-  leave(node, done){
-    var ok = false;
-
-    function complete() {
-      if (!ok) {
-        ok = 1;
-        done();
-      }
-    }
-
-    velocity(node, 'slideUp', {
-      duration: 300,
-      complete: complete
-    });
-    return {
-      stop: function () {
-        velocity(node, 'finish');
-        // velocity complete is async
-        complete();
-      }
-    };
-  },
-};
-
 React.render(<div>
-  {React.cloneElement(<Tree defaultExpandAll={true} checkable={true} onCheck={handleCheck}>
+ <Tree defaultExpandAll={true} checkable={true} onCheck={handleCheck}>
     <TreeNode title="parent 1">
       <TreeNode title="leaf" />
       <TreeNode title="parent 1-1">
@@ -75,10 +26,7 @@ React.render(<div>
         <TreeNode title="leaf" />
       </TreeNode>
     </TreeNode>
-  </Tree>, {
-    openAnimation: animation,
-  })}
+  </Tree>
 </div>
-
 , document.getElementById('components-tree-demo-checkbox'));
 ````

components/tree/index.jsx

@@ -1,5 +1,57 @@
 import React from 'react';
 import Tree from 'rc-tree';
+import velocity from 'velocity-animate';
+
+const animation = {
+  enter(node, done){
+    var ok = false;
+
+    function complete() {
+      if (!ok) {
+        ok = 1;
+        done();
+      }
+    }
+
+    node.style.display = 'none';
+    velocity(node, 'slideDown', {
+      duration: 300,
+      complete: complete
+    });
+    return {
+      stop: function () {
+        velocity(node, 'finish');
+        // velocity complete is async
+        complete();
+      }
+    };
+  },
+
+  leave(node, done){
+    var ok = false;
+
+    node.style.display = 'block';
+
+    function complete() {
+      if (!ok) {
+        ok = 1;
+        done();
+      }
+    }
+
+    velocity(node, 'slideUp', {
+      duration: 300,
+      complete: complete
+    });
+    return {
+      stop: function () {
+        velocity(node, 'finish');
+        // velocity complete is async
+        complete();
+      }
+    };
+  },
+};
 
 const AntTree = React.createClass({
   getDefaultProps() {
@@ -15,7 +67,7 @@ const AntTree = React.createClass({
     if (checkable) {
       checkable = <span className={`${props.prefixCls}-checkbox-inner`}></span>;
     }
-    return <Tree {...props} checkable={checkable}>
+    return <Tree openAnimation={animation} {...props} checkable={checkable}>
       {this.props.children}
     </Tree>;
   }

index.js

@@ -44,8 +44,6 @@ const antd = {
   Menu: require('./components/menu')
 };
 
-antd.velocity = require('velocity-animate');
-
 module.exports = antd;
 
 antd.version = require('./package.json').version;