p85126437
/
amis
forked from p96170835/amis
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

modal 动画改用 animation 而不是 transition, 动画扩展性较好

This commit is contained in:
liaoxuezhi 2019-10-31 00:18:50 +08:00
parent 048364dcc8
commit 476bdcbb30
2 changed files with 41 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
scss/components/_modal.scss
View File

@ -7,6 +7,20 @@
} }
} }
@keyframes modalIn {
from {
opacity: 0;
transform: translate3d(0, -300px, 0) scale(0.2);
}
}
@keyframes modalOut {
to {
opacity: 0;
transform: translate3d(0, -300px, 0) scale(0.2);
}
}
.#{$ns}Modal { .#{$ns}Modal {
position: fixed; position: fixed;
top: 0; top: 0;
@ -35,18 +49,29 @@
border: $Modal-content-borderWidth solid $Modal-content-borderColor; border: $Modal-content-borderWidth solid $Modal-content-borderColor;
border-radius: $Modal-content-borderRadius; border-radius: $Modal-content-borderRadius;
transition: ease-out all 0.3s; // transition: ease-out all 0.3s;
transform: translateY(-300px) scale(0.2); // transform: translateY(-300px) scale(0.2);
opacity: 0; // opacity: 0;
&.in,
&.out {
// opacity: 1;
// transform: translateY(0) scale(1);
animation-duration: 0.35s;
animation-fill-mode: both;
}
&.in { &.in {
opacity: 1; animation-name: modalIn;
transform: translateY(0) scale(1); }
&.out {
animation-name: modalOut;
} }
} }
&-overlay { &-overlay {
transition: ease-out opacity 0.3s; transition: ease-out opacity 0.5;
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
@ -56,7 +81,8 @@
background-color: $Modal-overlay-bg; background-color: $Modal-overlay-bg;
opacity: 0; opacity: 0;
&.in { &.in,
&.out {
opacity: 1; opacity: 1;
} }
} }
@ -105,7 +131,7 @@
} }
} }
&-content > &-close { &-content>&-close {
position: absolute; position: absolute;
right: $gap-md; right: $gap-md;
top: $gap-sm; top: $gap-sm;
@ -113,13 +139,12 @@
} }
&-body { &-body {
padding: $Modal-body--noHeader-paddingTop $Modal-body-paddingX padding: $Modal-body--noHeader-paddingTop $Modal-body-paddingX $Modal-body-paddingY;
$Modal-body-paddingY;
flex-basis: 0; flex-basis: 0;
flex-grow: 1; flex-grow: 1;
} }
&-header + &-body { &-header+&-body {
padding-top: $Modal-body-paddingY; padding-top: $Modal-body-paddingY;
} }
@ -146,9 +171,7 @@
@for $i from (2) through 10 { @for $i from (2) through 10 {
.#{$ns}Modal--#{$i}th { .#{$ns}Modal--#{$i}th {
.#{$ns}Modal-content { .#{$ns}Modal-content {
margin-top: $Modal-content-startMarginTop + margin-top: $Modal-content-startMarginTop + ($i - 1) * $Modal-content-stepMarginTop;
($i - 1) *
$Modal-content-stepMarginTop;
} }
} }
} }
@ -187,4 +210,4 @@
.#{$ns}Dialog-error { .#{$ns}Dialog-error {
color: $danger; color: $danger;
} }

5
src/components/Modal.tsx
View File

@ -5,7 +5,7 @@
*/ */
import React from 'react'; import React from 'react';
import Transition, {ENTERED, ENTERING} from 'react-transition-group/Transition'; import Transition, {ENTERED, ENTERING, EXITING} from 'react-transition-group/Transition';
import {Portal} from 'react-overlays'; import {Portal} from 'react-overlays';
import cx from 'classnames'; import cx from 'classnames';
import {current, addModal, removeModal} from './ModalManager'; import {current, addModal, removeModal} from './ModalManager';
@ -30,7 +30,8 @@ const fadeStyles: {
[propName: string]: string; [propName: string]: string;
} = { } = {
[ENTERING]: 'in', [ENTERING]: 'in',
[ENTERED]: 'in' [ENTERED]: 'in',
[EXITING]: 'out'
}; };
export class Modal extends React.Component<ModalProps, ModalState> { export class Modal extends React.Component<ModalProps, ModalState> {
static defaultProps = { static defaultProps = {