mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 19:19:57 +08:00
Code Issues Actions 31 Packages Projects Releases Wiki Activity

fix(tag): Add enter animation

Browse Source
This commit is contained in:
afc163 2016-01-27 14:48:25 +08:00
parent bf7caf9dda
commit dc1e05f9e9
2 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/tag/index.jsx
View File

@ -44,10 +44,11 @@ class AntTag extends React.Component {
[prefixCls + '-close']: this.state.closing,
});
return (
<Animate component=""
showProp="data-show"
transitionName={prefixCls + '-zoom'}
onEnd={this.animationEnd.bind(this)}>
<Animate component=""
showProp="data-show"
transitionName={prefixCls + '-zoom'}
transitionAppear
onEnd={this.animationEnd.bind(this)}>
{this.state.closed ? null : (
<div data-show={!this.state.closing} className={className}>
<span className={prefixCls + '-text'} {...restProps} />

7
style/components/tag.less
View File

@ -12,7 +12,6 @@
margin-right: 4px;
margin-bottom: 8px;
transition: all 0.3s @ease-in-out-circ;
transform-origin: 100% 50%;
vertical-align: middle;
opacity: 0.85;
overflow: hidden;
@ -84,6 +83,12 @@
margin: 0;
}
&-zoom-enter,
&-zoom-appear {
animation: antZoomIn .2s @ease-in-out-circ;
animation-fill-mode: both;
}
&-zoom-leave {
animation: antZoomOut .2s @ease-in-out-circ;
animation-fill-mode: both;