test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 12:08:13 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

优化一下 modal 的动画效果

Browse Source
This commit is contained in:
liaoxuezhi 2019-10-31 10:35:24 +08:00
parent 9a0beb755e
commit 99b10dbaae
2 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
scss/components/_modal.scss
View File

@ -71,7 +71,8 @@
} }
&-overlay { &-overlay {
transition: ease-out opacity 0.5; transition: ease-in-out opacity 0.5s;
// transition-delay: 0.2s;
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
@ -81,10 +82,13 @@
background-color: $Modal-overlay-bg; background-color: $Modal-overlay-bg;
opacity: 0; opacity: 0;
&.in, &.in {
&.out {
opacity: 1; opacity: 1;
} }
&.out {
opacity: 0;
}
} }
&-header { &-header {

4
src/components/Modal.tsx
View File

@ -87,12 +87,12 @@ export class Modal extends React.Component<ModalProps, ModalState> {
mountOnEnter mountOnEnter
unmountOnExit unmountOnExit
in={show} in={show}
timeout={350} timeout={1000}
onExited={this.handleExited} onExited={this.handleExited}
onEntered={this.handleEntered} onEntered={this.handleEntered}
> >
{(status: string) => { {(status: string) => {
if (status === ENTERING) { if (status === ENTERING || status === EXITING) {
// force reflow // force reflow
// 由于从 mount 进来到加上 in 这个 class 估计是时间太短，上次的样式还没应用进去，所以这里强制reflow一把。 // 由于从 mount 进来到加上 in 这个 class 估计是时间太短，上次的样式还没应用进去，所以这里强制reflow一把。
// 否则看不到动画。 // 否则看不到动画。