Merge pull request #552 from ant-design/badge-anim

add 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,5 +1,5 @@
-import React, { cloneElement } from 'react';
-const prefixCls = 'ant-badge';
+import React from 'react';
+import Animate from 'rc-animate';
 
 class AntBadge extends React.Component {
   constructor(props) {
@@ -7,30 +7,41 @@ class AntBadge extends React.Component {
   }
 
   render() {
-    if (this.props.dot) {
-      return <span className={prefixCls} {...this.props}>
-        {this.props.children}
-        <sup className={prefixCls + '-dot'}></sup>
-      </span>;
+    let { count, prefixCls } = this.props;
+    const dot = this.props.dot;
+
+    count = count >= 100 ? '99+' : count;
+
+    // dot mode don't need count
+    if (dot) {
+      count = '';
     }
-    let count = this.props.count;
+
     // 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}>
-          {this.props.children}
-          <sup className={prefixCls + '-count'}>{count}</sup>
-        </span>
-      );
-    }
+    const hidden = (!count || count === '0') && !dot;
+    const className = prefixCls + (dot ? '-dot' : '-count');
+
+    return (
+      <span className={prefixCls} title={count} {...this.props}>
+        {this.props.children}
+        <Animate component=""
+          showProp="data-show"
+          transitionName={prefixCls + '-zoom'}
+          transitionAppear={true}>
+          {
+            hidden ? null :
+            <sup data-show={!hidden} className={className}>
+              {count}
+            </sup>
+          }
+        </Animate>
+      </span>
+    );
   }
 }
 
 AntBadge.defaultProps = {
-  prefixCls: prefixCls,
+  prefixCls: 'ant-badge',
   count: null,
   dot: false
 };

components/tag/index.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Animate from 'rc-animate';
 import Icon from '../iconfont';
-const prefixCls = 'ant-tag';
 
 class AntTag extends React.Component {
   constructor(props) {
@@ -42,7 +41,7 @@ class AntTag extends React.Component {
     return this.state.closed ? null
       : <Animate component=""
                  showProp="data-show"
-                 transitionName="zoom-tag"
+                 transitionName={this.props.prefixCls + '-zoom'}
                  onEnd={this.animationEnd.bind(this)}>
         <div data-show={!this.state.closing} className={className}>
           <a className={this.props.prefixCls + '-text'} {...this.props} />
@@ -53,7 +52,7 @@ class AntTag extends React.Component {
 }
 
 AntTag.defaultProps = {
-  prefixCls: prefixCls,
+  prefixCls: 'ant-tag',
   closable: false,
   onClose: function() {}
 };

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,16 +30,27 @@
 
   &-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;
   }
+
+  &-zoom-appear,
+  &-zoom-enter {
+    animation: antZoomBadgeIn .3s @ease-out-back;
+    animation-fill-mode: both;
+  }
+
+  &-zoom-leave {
+    animation: antZoomBadgeOut .3s @ease-in-back;
+    animation-fill-mode: both;
+  }
 }
 
 a .@{badge-prefix-cls} {
@@ -50,3 +61,23 @@ a .@{badge-prefix-cls} {
     background: shade(@error-color, 5%);
   }
 }
+
+@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%);
+  }
+}

style/components/tag.less

@@ -71,9 +71,13 @@
   }
 
   &-close {
-
     width: 0 !important;
     padding: 0;
     margin-right: 0;
   }
+
+  &-zoom-leave {
+    animation: antZoomOut .3s @ease-in-out-circ;
+    animation-fill-mode: both;
+  }
 }

style/core/motion/zoom.less

@@ -16,12 +16,6 @@
 .zoom-motion(zoom-left, antZoomLeft);
 .zoom-motion(zoom-right, antZoomRight);
 
-
-.zoom-tag-leave{
-  animation: antZoomOut .3s @ease-in-out-circ;
-}
-
-
 @keyframes antZoomIn {
   0% {
     opacity: 0;
@@ -41,6 +35,7 @@
     transform: scale(0);
   }
 }
+
 @keyframes antZoomBigIn {
   0% {
     opacity: 0;