github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-13 03:56:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui): tweak modal animations

Browse Source
This commit is contained in:
Łukasz Mierzwa
2020-07-24 20:18:18 +01:00
committed by Łukasz Mierzwa
parent 91fd7a04ad
commit a38c1fc4a1
2 changed files with 19 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/Components/Modal/index.tsx
View File

@@ -65,7 +65,7 @@ const Modal: FC<{
<CSSTransition
in={isOpen}
classNames="components-animation-modal"
timeout={300}
timeout={400}
onExited={onExited}
enter
exit
@@ -78,7 +78,7 @@ const Modal: FC<{
<CSSTransition
in={isOpen && !isUpper}
classNames="components-animation-backdrop"
timeout={300}
timeout={400}
enter
exit
unmountOnExit

31
ui/src/Styles/Components/MountModal.scss
View File

@@ -1,25 +1,26 @@
$duration: 0.3s;
$move: -33%;
$opacity-modal: 0.5;
$duration-modal: 0.2s;
$move: -110%;
$opacity-modal: 0.85;
$duration-bg: 0.2s;
$opacity-bg: 0.8;
$easing: ease-in-out;
.components-animation-modal {
will-change: opacity, transform;
transform: translateZ(0);
}
.components-animation-modal-enter > .modal > .modal-dialog {
opacity: $opacity-modal;
transform: translate(0, $move);
}
.components-animation-modal-enter-active > .modal > .modal-dialog {
opacity: 1;
transition: transform $duration $easing, opacity $duration $easing;
transition: transform $duration-modal $easing $duration-bg,
opacity $duration-modal $easing $duration-bg;
transform: translate(0, 0);
}
.components-animation-modal-exit > .modal > .modal-dialog {
opacity: 1;
transform: translate(0, 0);
@@ -27,26 +28,28 @@ $easing: ease-in-out;
.components-animation-modal-exit-active > .modal > .modal-dialog {
opacity: $opacity-modal;
transform: translate(0, $move);
transition: transform $duration $easing, opacity $duration $easing;
transition: transform $duration-modal $easing, opacity $duration-modal $easing;
}
.components-animation-backdrop {
will-change: opacity;
transform: translateZ(0);
}
.components-animation-backdrop-enter {
opacity: $opacity-modal;
opacity: 0.01;
}
.components-animation-backdrop-enter-active {
opacity: $opacity-bg;
transition: opacity $duration $easing;
transition: opacity $duration-bg $easing;
}
.components-animation-backdrop-enter-done {
opacity: $opacity-bg;
transition: opacity $duration $easing;
transition: opacity $duration-bg $easing;
}
.components-animation-backdrop-exit {
opacity: $opacity-bg;
}
.components-animation-backdrop-exit-active {
opacity: 0.01;
transition: opacity $duration $easing;
transition: opacity $duration-bg $easing $duration-modal;
}