Add spining for better transition effect, ref #315

components/spin/demo/nested.md

@@ -25,7 +25,7 @@ const Card = React.createClass({
       description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
       type="info" />;
     return <div>
-      {this.state.loading ? <Spin>{container}</Spin> : container}
+      <Spin spining={this.state.loading}>{container}</Spin>
       切换加载状态：<Switch checked={this.state.loading} onChange={this.toggle} />
     </div>;
   }

components/spin/index.jsx

@@ -5,7 +5,8 @@ import { isCssAnimationSupported } from 'css-animation';
 const AntSpin = React.createClass({
   getDefaultProps() {
     return {
-      size: 'default'
+      size: 'default',
+      spining: true
     };
   },
 
@@ -24,7 +25,8 @@ const AntSpin = React.createClass({
     let spinClassName = classSet({
       'ant-spin': true,
       [`ant-spin-${size}`]: size,
-      [className]: !!className
+      [className]: !!className,
+      'ant-spin-spining': this.props.spining,
     });
 
     let spinElement;
@@ -43,7 +45,7 @@ const AntSpin = React.createClass({
 
     if (this.isNestedPattern()) {
       return (
-        <div className="ant-spin-nested-loading">
+        <div className={this.props.spining ? 'ant-spin-nested-loading' : ''}>
           {spinElement}
           <div className="ant-spin-container">
             {this.props.children}

components/spin/index.md

@@ -18,4 +18,5 @@
 
 | 参数       | 类型           | 默认值      | 说明         |
 |------------|----------------|-------------|--------------|
-| size       | enum           | default     | spin组件中点的大小，可选值为 small default large
+| size       | enum           | default     | spin组件中点的大小，可选值为 small default large |
+| spining    | boolean        | true        | 用于内嵌其他组件的模式，可以关闭 loading 效果    |

style/components/spin.less

@@ -10,6 +10,14 @@
   display: inline-block;
   font-size: 1em;
   text-align: center;
+  opacity: 0;
+  position: absolute;
+  transition: opacity 0.3s @ease-in-out-circ;
+
+  &-spining {
+    opacity: 1;
+    position: static;
+  }
 
   &-nested-loading {
     position: relative;
@@ -25,7 +33,7 @@
   }
 
   &-container {
-    transition: all 0.5s ease;
+    transition: all 0.3s @ease-in-out-circ;
   }
 
   &-nested-loading > &-container {