Update dialog animation

This commit is contained in:
Ajay Bura 2022-08-19 11:38:14 +05:30
parent c355ff3f53
commit 95640b8242
2 changed files with 31 additions and 25 deletions

View file

@ -42,7 +42,6 @@ function RawModal({
shouldCloseOnEsc={closeFromOutside} shouldCloseOnEsc={closeFromOutside}
shouldCloseOnOverlayClick={closeFromOutside} shouldCloseOnOverlayClick={closeFromOutside}
shouldReturnFocusAfterClose={false} shouldReturnFocusAfterClose={false}
closeTimeoutMS={300}
> >
{children} {children}
</Modal> </Modal>

View file

@ -1,27 +1,3 @@
.ReactModal__Overlay {
opacity: 0;
transition: opacity 200ms var(--fluid-slide-up);
}
.ReactModal__Overlay--after-open{
opacity: 1;
}
.ReactModal__Overlay--before-close{
opacity: 0;
}
.ReactModal__Content {
transform: translateY(100%);
transition: transform 200ms var(--fluid-slide-up);
}
.ReactModal__Content--after-open{
transform: translateY(0);
}
.ReactModal__Content--before-close{
transform: translateY(100%);
}
.raw-modal { .raw-modal {
--small-modal-width: 525px; --small-modal-width: 525px;
--medium-modal-width: 712px; --medium-modal-width: 712px;
@ -61,3 +37,34 @@
background-color: var(--bg-overlay); background-color: var(--bg-overlay);
} }
} }
.ReactModal__Overlay {
animation: raw-modal--overlay 150ms;
}
.ReactModal__Content {
animation: raw-modal--content 150ms;
}
@keyframes raw-modal--content {
0% {
transform: scale(1.1);
opacity: .5;
}
80% {
transform: scale(.995);
opacity: 1;
}
100% {
transform: scale(1) translateY(0);
opacity: 1;
}
}
@keyframes raw-modal--overlay {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}