Merge pull request #162 from ant-design/tagAnimation

Tag animation

components/tag/index.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { transitionEndEvent, addEventListenerOnce } from '../util/index';
 const prefixCls = 'ant-tag';
 
 class AntTag extends React.Component {
@@ -10,17 +11,29 @@ class AntTag extends React.Component {
     };
   }
   close(e) {
+    var dom = React.findDOMNode(this);
+    addEventListenerOnce(dom,transitionEndEvent, function () {
+      dom.remove();
+    });
+    dom.style.width = dom.offsetWidth + 'px';
+    // Magic code
+    // 重复是去除浏览器渲染bug；
+    dom.style.width = dom.offsetWidth + 'px';
     this.setState({
       closed: true
     });
     this.props.onClose.call(this, e);
   }
+
   render() {
     let close = this.props.closable ?
       <i className="anticon anticon-cross" onClick={this.close.bind(this)}></i> : '';
     let colorClass = this.props.prefixCls + '-' + this.props.color;
 
-    return this.state.closed ? null : <div className={this.props.prefixCls + ' ' + colorClass}>
+    let className = this.props.prefixCls + ' ' + colorClass;
+    className = this.state.closed ? className + ' ' + this.props.prefixCls + '-close' : className;
+
+    return <div className={className}>
       <a className={this.props.prefixCls + '-text'} {...this.props} />
       {close}
     </div>;
@@ -30,7 +43,8 @@ class AntTag extends React.Component {
 AntTag.defaultProps = {
   prefixCls: prefixCls,
   closable: false,
-  onClose: function() {}
+  onClose: function () {
+  }
 };
 
 export default AntTag;

components/util/index.jsx

@@ -0,0 +1,41 @@
+import { Dom } from 'rc-util';
+
+export let transitionEndEvent = whichTransitionEvent();
+export let animationEndEvent = whichAnimationEvent();
+
+function whichTransitionEvent() {
+  const transitions = {
+    'transition': 'transitionend',
+    'OTransition': 'oTransitionEnd',
+    'MozTransition': 'transitionend',
+    'WebkitTransition': 'webkitTransitionEnd'
+  };
+  for (let t in transitions) {
+    if (t in document.documentElement.style) {
+      return transitions[t];
+    }
+  }
+  return false;
+}
+
+function whichAnimationEvent() {
+  const animation = {
+    'animation': 'animationend',
+    'OAnimation': 'oAnimationEnd',
+    'MozAnimation': 'animationend',
+    'WebkitAnimation': 'webkitAnimationEnd'
+  };
+  for (let t in animation) {
+    if (t in document.documentElement.style) {
+      return animation[t];
+    }
+  }
+  return false;
+}
+
+export let addEventListenerOnce = function(element, type, handler) {
+  var eventListener = Dom.addEventListener(element, type, function(event) {
+    eventListener && eventListener.remove();
+    handler(event);
+  });
+};

style/components/tag.less

@@ -11,7 +11,8 @@
   font-size: @font-size-base;
   margin-right: 4px;
   margin-bottom: 8px;
-  transition: all 0.3s @ease-in-out-quint;
+  transition: all 0.3s @ease-in-out-circ;
+  transform-origin: 100% 50%;
   vertical-align: middle;
   opacity: 0.85;
   overflow: hidden;
@@ -33,7 +34,7 @@
     margin-left: 3px;
     position: relative;
     top: -1px;
-    color: #6666;
+    color: #666;
     transition: all 0.3s ease;
     opacity: 0.66;
 
@@ -71,4 +72,11 @@
     background: @error-color;
   }
 
+  &-close{
+    transform: scale(0);
+    width: 0 !important;
+    opacity: 0 !important;
+    padding: 0;
+    margin-right: 0;
+  }
 }