Merge branch 'badge-anim' of github.com:ant-design/ant-design into badge-anim

components/badge/demo/change.md

@@ -13,7 +13,8 @@ const ButtonGroup = Button.Group;
 const Test = React.createClass({
   getInitialState() {
     return {
-      count: 5
+      count: 5,
+      show: true,
     };
   },
   increase() {
@@ -27,11 +28,25 @@ const Test = React.createClass({
     }
     this.setState({ count });
   },
+  onClick() {
+      this.setState({
+        show:!this.state.show
+      });
+    },
+  onNumberClick(){
+    const count = this.state.count;
+    this.setState({
+     count:count ? 0 : 5
+    })
+  },
   render() {
     return <div>
       <Badge count={this.state.count}>
         <a href="#" className="head-example"></a>
       </Badge>
+      <Badge dot={this.state.show}>
+        <a href="#">一个链接</a>
+      </Badge>
       <div style={{ marginTop: 10 }}>
         <ButtonGroup>
           <Button type="ghost" onClick={this.decline}>
@@ -41,6 +56,8 @@ const Test = React.createClass({
             <Icon type="plus" />
           </Button>
         </ButtonGroup>
+        <Button type="ghost" onClick={this.onClick} style={{marginLeft:10}}>点切换</Button>
+        <Button type="ghost" onClick={this.onNumberClick} style={{marginLeft:10}}>数字切换</Button>
       </div>
     </div>;
   }

components/badge/index.jsx

@@ -1,4 +1,5 @@
-import React, { cloneElement } from 'react';
+import React from 'react';
+import Animate from 'rc-animate';
 const prefixCls = 'ant-badge';
 
 class AntBadge extends React.Component {
@@ -6,26 +7,26 @@ class AntBadge extends React.Component {
     super(props);
   }
 
+
   render() {
-    if (this.props.dot) {
-      return <span className={prefixCls} {...this.props}>
-        {this.props.children}
-        <sup className={prefixCls + '-dot'}></sup>
-      </span>;
-    }
     let count = this.props.count;
+    const dot = this.props.dot;
     // null undefined "" "0" 0
-    if (!count || count === '0') {
-      return cloneElement(this.props.children);
-    } else {
-      count = count >= 100 ? '99+' : count;
-      return (
-        <span className={prefixCls} title={count} {...this.props}>
+    const closed = !count || count === '0';
+    const countIsNull = count === null ? true : false;
+    count = count >= 100 ? '99+' : count;
+    return (
+      <span className={prefixCls} title={!countIsNull ? count : ''} {...this.props}>
           {this.props.children}
-          <sup className={prefixCls + '-count'}>{count}</sup>
-        </span>
-      );
-    }
+        <Animate component=""
+          showProp="data-show"
+          transitionName="zoom-badge"
+          transitionAppear={true}
+        >
+        {closed && !dot ? null : <sup data-show={countIsNull ? dot : !closed} className={prefixCls + (!countIsNull ? '-count' : '-dot')}>{!countIsNull ? count : ''}</sup>}
+        </Animate>
+      </span>
+    );
   }
 }
 

style/components/badge.less

@@ -19,7 +19,7 @@
     padding: 0 7px;
     font-size: 12px;
     white-space: nowrap;
-    transition: all 0.3s ease;
+    transform-origin: -10% center;
     z-index: 10;
     font-family: tahoma;
     box-shadow: 0 0 0 1px #fff;
@@ -30,13 +30,13 @@
 
   &-dot {
     position: absolute;
+    transform: translateX(-50%);
+    transform-origin: 0px center;
     top: -4px;
-    right: -4px;
     height: 8px;
     width: 8px;
     border-radius: 100%;
     background: @error-color;
-    transition: all 0.3s ease;
     z-index: 10;
     box-shadow: 0 0 0 1px #fff;
   }
@@ -50,3 +50,4 @@ a .@{badge-prefix-cls} {
     background: shade(@error-color, 5%);
   }
 }
+

style/core/motion/zoom.less

@@ -16,11 +16,40 @@
 .zoom-motion(zoom-left, antZoomLeft);
 .zoom-motion(zoom-right, antZoomRight);
 
-
-.zoom-tag-leave{
-  animation: antZoomOut .3s @ease-in-out-circ;
+.zoom-badge-appear,.zoom-badge-enter {
+  animation: antZoomBadgeIn .3s @ease-out-back;
+  animation-fill-mode: both;
 }
 
+.zoom-badge-leave {
+  animation: antZoomBadgeOut .3s @ease-in-back;
+  animation-fill-mode: both;
+}
+
+.zoom-tag-leave {
+  animation: antZoomOut .3s @ease-in-out-circ;
+  animation-fill-mode: both;
+}
+
+@keyframes antZoomBadgeIn {
+  0% {
+    opacity: 0;
+    transform: scale(0) translateX(-50%);
+  }
+  100% {
+    transform: scale(1) translateX(-50%);
+  }
+}
+
+@keyframes antZoomBadgeOut {
+  0% {
+    transform: scale(1) translateX(-50%);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0) translateX(-50%);
+  }
+}
 
 @keyframes antZoomIn {
   0% {
@@ -41,6 +70,7 @@
     transform: scale(0);
   }
 }
+
 @keyframes antZoomBigIn {
   0% {
     opacity: 0;