From a75dfe8fd6590bfa1c8eac2f89ba2fd7238a84de Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 27 Jan 2016 01:20:05 +0800
Subject: [PATCH] Add tag control demo

---
 components/tag/demo/control.md | 50 ++++++++++++++++++++++++++++++++++
 components/tag/index.jsx       | 14 ++++++----
 components/tag/index.md        |  3 +-
 3 files changed, 61 insertions(+), 6 deletions(-)
 create mode 100644 components/tag/demo/control.md

diff --git a/components/tag/demo/control.md b/components/tag/demo/control.md
new file mode 100644
index 0000000000..e252d61d35
--- /dev/null
+++ b/components/tag/demo/control.md
@@ -0,0 +1,50 @@
+# 数据生成标签
+
+- order: 2
+
+用数组生成一组标签。
+
+> 使用 `afterClose` 而不是 `onClose`，删除时有动画效果。
+
+---
+
+````jsx
+import { Tag, Button } from 'antd';
+
+let index = 2;
+const App = React.createClass({
+  getInitialState() {
+    return {
+      tags: [
+        { key: 1, name: '标签一'},
+        { key: 2, name: '标签二'},
+      ],
+    };
+  },
+  handleClose(key) {
+    const tags = [...this.state.tags].filter(tag => (tag.key !== key) && tag);
+    console.log(tags);
+    this.setState({ tags });
+  },
+  addTag() {
+    const tags = [...this.state.tags];
+    index += 1;
+    tags.push({ key: index, name: '新标签' + index });
+    this.setState({ tags });
+  },
+  render() {
+    return (
+      <div>
+        {this.state.tags.map(tag =>
+          <Tag key={tag.key} closable afterClose={this.handleClose.bind(this, tag.key)}>{tag.name}</Tag>
+        )}
+        <div>
+          <Button onClick={this.addTag}>添加标签</Button>
+        </div>
+      </div>
+    );
+  }
+});
+
+ReactDOM.render(<App />, mountNode);
+````
diff --git a/components/tag/index.jsx b/components/tag/index.jsx
index c90a2f038c..eb76b432ff 100644
--- a/components/tag/index.jsx
+++ b/components/tag/index.jsx
@@ -24,11 +24,14 @@ class AntTag extends React.Component {
     this.props.onClose(e);
   }
 
-  animationEnd() {
-    this.setState({
-      closed: true,
-      closing: false,
-    });
+  animationEnd(key, existed) {
+    if (!existed) {
+      this.setState({
+        closed: true,
+        closing: false,
+      });
+      this.props.afterClose();
+    }
   }
 
   render() {
@@ -56,6 +59,7 @@ AntTag.defaultProps = {
   prefixCls: 'ant-tag',
   closable: false,
   onClose() {},
+  afterClose() {},
 };
 
 export default AntTag;
diff --git a/components/tag/index.md b/components/tag/index.md
index 062bb0b12c..750e6b74d3 100644
--- a/components/tag/index.md
+++ b/components/tag/index.md
@@ -18,5 +18,6 @@
 | 参数           | 说明                           | 类型       |  可选值 | 默认值 |
 |----------------|--------------------------------|------------|---------|--------|
 | closable       | 标签是否可以关闭               | boolean    |         | false  |
-| onClose        | 组合时根据此项判定checked      | function   |         | 无     |
+| onClose        | 关闭时的回调                   | function   |         | 无     |
+| afterClose     | 动画关闭后的回调                | function   |         | 无     |
 | color          | 标签的色彩                     | string     | blue green yellow red | 无 |