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 (
+
+ {this.state.tags.map(tag =>
+
{tag.name}
+ )}
+
+
+
+
+ );
+ }
+});
+
+ReactDOM.render(, 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 | 无 |