mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 13:09:40 +08:00
Code Issues Actions 50 Packages Projects Releases Wiki Activity

update upload animation code style

Browse Source
This commit is contained in:
afc163 2015-08-21 17:37:54 +08:00
parent 3a134c7219
commit e23372b6e8
2 changed files with 23 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/upload/uploadList.jsx
View File

@ -22,7 +22,6 @@ export default React.createClass({
}
},
handleClose(file) {
let matchWay = (!file.uid) ? 'byName' : 'byUid';
let items = this.state.items;
let removeItem = getFileItem(file, items);
if (removeItem) {
@ -41,13 +40,13 @@ export default React.createClass({
{statusIcon}
<b className={prefixCls + '-item-name'}>{file.filename}</b>
<i className="anticon anticon-cross" ref="theCloseBtn"
onClick={this.handleClose.bind(this, file)}></i>
onClick={this.handleClose.bind(this, file)}></i>
</div>
);
};
return (<div className={prefixCls + '-list'}>
<Animate transitionName='m-top'>
{items.map(downloadItem)}
<Animate transitionName={prefixCls + '-margin-top'}>
{items.map(downloadItem)}
</Animate>
</div>);
}

38
style/components/upload.less
View File

@ -99,24 +99,26 @@
color: @success-color;
font-weight: bold;
}
}
.m-top-enter{
animation:marginTopIn .3s @ease-in-out-circ;
}
.m-top-leave{
animation:marginTopOut .3s @ease-in-out-circ;
}
@keyframes marginTopIn {
from{
margin-top: -25px;
opacity: 0;
}
}
@keyframes marginTopOut {
to{
margin-top: -25px;
opacity: 0;
.@{upload-prefix-cls}-margin-top-enter {
animation: marginTopIn .3s @ease-in-out-circ;
}
.@{upload-prefix-cls}-margin-top-leave {
animation: marginTopOut .3s @ease-in-out-circ;
}
@keyframes marginTopIn {
from {
margin-top: -25px;
opacity: 0;
}
}
@keyframes marginTopOut {
to {
margin-top: -25px;
opacity: 0;
}
}
}