update badge anim 0-9, 9-0

components/badge/AntNumber.jsx

@@ -1,12 +1,16 @@
 import React, {createElement, cloneElement} from 'react';
 import {findDOMNode} from 'react-dom';
-import {toArrayChildren} from './utils';
+import {toArrayChildren, getPartNumber, getTranslateY} from './utils';
 import assign from 'object-assign';
 
 class AntNumber extends React.Component {
   constructor(props) {
     super(props);
     const children = toArrayChildren(this.props.children);
+    this.endSetState = false;
+    this.count = this.props.count;
+    this.data = getPartNumber(this.count);
+    this.timeout = null;
     this.state = {
       children,
     };
@@ -14,9 +18,8 @@ class AntNumber extends React.Component {
 
   getNumberOnly(c) {
     const childrenToReturn = [];
-    for (let i = -1; i < 11; i++) {
-      let count = i >= 10 ? i - 10 : i;
-      count = i === -1 ? 9 : count;
+    for (let i = 0; i < 30; i++) {
+      let count = i >= 10 ? i % 10 : i;
       const children = <p key={i}>{count}</p>;
       childrenToReturn.push(children);
     }
@@ -24,12 +27,18 @@ class AntNumber extends React.Component {
     return createElement('span', {className: `${this.props.prefixCls}-only`, key: key}, childrenToReturn);
   }
 
+  setEndState(style) {
+    this.endSetState = true;
+    style.transition = 'none';
+  }
+
   getNumberElement(props) {
     const count = props.count;
     if (!count || count === '') {
       return null;
     }
-    let length = count.toString().length;
+    const length = count.toString().length;
+    const data = getPartNumber(count);
     let childrenWap = [];
     let i = 0;
     while (i < length) {
@@ -38,35 +47,61 @@ class AntNumber extends React.Component {
       i++;
     }
     const height = findDOMNode(this).offsetHeight;
+    const _length = childrenWap.length - 1;
     childrenWap = childrenWap.map((child, j)=> {
-      let oneData = Number(count.toString()[j]);
-      let offsetTop = -(oneData + 1) * height;
-      return cloneElement(child, {style: {transform: 'translateY(' + offsetTop + 'px)'}});
+      const oneData = Number(count.toString()[j]);
+      const style = {};
+      let translateY = -(oneData + 10) * height;
+      //判断状态
+      translateY = getTranslateY(count, this.count, data, this.data, j, height, _length) || translateY;
+      if (count !== this.count) {
+        this.setEndState(style);
+      }
+      style.transform = 'translateY(' + translateY + 'px)';
+      return cloneElement(child, {style: style});
     });
+    this.data = data;
+    this.count = count;
     return childrenWap;
   }
 
   updateChildren(props) {
     if (typeof props.count === 'string') {
+      this.data = getPartNumber(this.props.max);
+      this.count = this.props.max;
       return this.setState({
-        children: [props.count]
+        children: [props.count],
       });
     }
-    let newChildren = this.getNumberElement(props);
-    //newChildren = this.addStyle(props, newChildren);
+    const newChildren = this.getNumberElement(props);
     if (newChildren && newChildren.length) {
       this.setState({
-        children: newChildren
+        children: newChildren,
+      }, ()=> {
+        if (this.endSetState) {
+          this.updateChildren(props);
+          this.endSetState = false;
+        }
       });
     }
   }
 
+  animEnd() {
+    clearTimeout(this.timeout);
+    this.timeout = setTimeout(()=> {
+      if (typeof this.props.callback === 'function') {
+        this.props.callback();
+      }
+    }, 300);
+  }
+
   componentDidMount() {
     this.updateChildren(this.props);
   }
 
   componentWillReceiveProps(nextProps) {
     this.updateChildren(nextProps);
+    this.animEnd();
   }
 
   render() {
@@ -78,7 +113,9 @@ class AntNumber extends React.Component {
 AntNumber.defaultProps = {
   prefixCls: 'ant-number',
   count: null,
-  component: 'sup'
+  max: 99,
+  component: 'sup',
+  callback: null,
 };
 
 AntNumber.propTypes = {
@@ -86,7 +123,9 @@ AntNumber.propTypes = {
     React.PropTypes.string,
     React.PropTypes.number
   ]),
-  component: React.PropTypes.string
+  component: React.PropTypes.string,
+  callback: React.PropTypes.func,
+  max: React.PropTypes.number,
 };
 
 export default AntNumber;

components/badge/demo/change.md

@@ -13,16 +13,16 @@ const ButtonGroup = Button.Group;
 const Test = React.createClass({
   getInitialState() {
     return {
-      count: 5,
+      count: 691,
       show: true,
     };
   },
   increase() {
-    const count = this.state.count + 1;
+    const count = this.state.count + 117;
     this.setState({ count });
   },
   decline() {
-    let count = this.state.count - 1;
+    let count = this.state.count - 111;
     if (count < 0) {
       count = 0;
     }
@@ -40,6 +40,7 @@ const Test = React.createClass({
     });
   },
   render() {
+  console.log(this.state.count)
     return <div>
       <Badge count={this.state.count}>
         <a href="#" className="head-example"></a>

components/badge/index.jsx

@@ -11,7 +11,7 @@ class AntBadge extends React.Component {
     let { count, prefixCls } = this.props;
     const dot = this.props.dot;
 
-    count = count >= 100 ? '99+' : count;
+    //count = count >= 100 ? '99+' : count;
 
     // dot mode don't need count
     if (dot) {
@@ -31,7 +31,7 @@ class AntBadge extends React.Component {
           transitionAppear={true}>
           {
             hidden ? null :
-            <AntNumber data-show={!hidden} className={className} count={count}/>
+            <AntNumber data-show={!hidden} className={className} count={count} callback = {this.props.animEnd}/>
           }
         </Animate>
       </span>
@@ -42,7 +42,8 @@ class AntBadge extends React.Component {
 AntBadge.defaultProps = {
   prefixCls: 'ant-badge',
   count: null,
-  dot: false
+  dot: false,
+  animEnd: null
 };
 
 AntBadge.propTypes = {
@@ -50,7 +51,8 @@ AntBadge.propTypes = {
     React.PropTypes.string,
     React.PropTypes.number
   ]),
-  dot: React.PropTypes.bool
+  dot: React.PropTypes.bool,
+  animEnd: React.PropTypes.func
 };
 
 export default AntBadge;

components/badge/utils.js

@@ -7,3 +7,64 @@ export function toArrayChildren(children) {
   });
   return ret;
 }
+
+export function getPartNumber(num) {
+  const countStr = num.toString();
+  const obj = {};
+  for (let i = 0; i < countStr.length; i++) {
+    obj[countStr.length - 1 - i] = Number(countStr[i]);
+  }
+  return obj;
+}
+
+export function getTranslateY(count, preCount, data, preData, j, height, _length) {
+  let translateY = 0;
+  const oneData = Number(count.toString()[j]);
+  const on = preData[_length - j];
+  const to = data[_length - j];
+  const preOn = preData[_length - j + 1];
+  const preTo = data[_length - j + 1];
+  if (count === preCount) {
+    const add = preData[(_length - j) + '_add'];
+    const rem = preData[(_length - j) + '_rem'];
+    if (add) {
+      translateY = -(oneData + 20) * height;
+    }
+    if (rem) {
+      translateY = -oneData * height;
+    }
+  }
+  if (count > preCount) {
+    if (on > to) {
+      translateY = -(oneData - (to - on)) * height;
+      data[(_length - j) + '_add'] = true;
+    } else if (on < to) {
+      translateY = -(oneData + 10 - (to - on)) * height;
+      if (preTo - preOn) {
+        translateY = -(oneData - (to - on)) * height;
+      }
+    } else {
+      if (typeof preOn === 'number' && typeof preTo === 'number') {
+        translateY = -oneData * height;
+      }
+    }
+  } else if (count < preCount) {
+    if (on < to) {
+      translateY = -(oneData + 20 - ( to - on)) * height;
+      data[(_length - j) + '_rem'] = true;
+    } else if (on > to) {
+      translateY = -(oneData + 10 - (to - on)) * height;
+      if (preOn - preTo) {
+        translateY = -(oneData + 20 - (to - on)) * height;
+      }
+    } else {
+      if (typeof preOn === 'number' && typeof preTo === 'number') {
+        translateY = -(oneData + 20) * height;
+      }
+    }
+  }
+  if (on !== 0 && !on) {
+    translateY = -10 * height;
+  }
+  return translateY;
+}

style/components/badge.less

@@ -68,7 +68,7 @@ a .@{badge-prefix-cls} {
   &-only{
     display: inline-block;
 
-    transition: transform .3s @ease-in-out;
+    transition: transform 2.3s @ease-in-out;
   }
 }