mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-09 16:53:36 -05:00
fix(settings): added bezier curve to animations
This commit is contained in:
parent
622f2b2bca
commit
4d769f42e1
3 changed files with 37 additions and 24 deletions
|
@ -13,6 +13,21 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
|
|||
z-index: 1;
|
||||
position: relative;
|
||||
|
||||
@keyframes bounce-from-bottom {
|
||||
0% {
|
||||
transform: translateY(33px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
animation-name: bounce-from-bottom;
|
||||
animation-duration: 340ms;
|
||||
animation-delay: 0ms;
|
||||
animation-timing-function: cubic-bezier(0.2, 0.9, 0.5, 1.16);
|
||||
animation-fill-mode: forwards;
|
||||
|
||||
${(props) =>
|
||||
props.position === "top" &&
|
||||
css`
|
||||
|
|
|
@ -65,7 +65,7 @@ export function GenericSettings({
|
|||
|
||||
setTimeout(() => {
|
||||
history.replace(state.layout.getLastPath());
|
||||
}, 100);
|
||||
}, 200);
|
||||
}, [history]);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
@ -4,33 +4,31 @@
|
|||
transform: scale(1.2);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes close {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes opacity {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes close {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* Settings CSS */
|
||||
|
@ -84,10 +82,10 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
animation: open 0.18s ease-out, opacity 0.18s;
|
||||
animation: open 340ms cubic-bezier(0.2, 0.9, 0.5, 1.16) forwards;
|
||||
|
||||
&.closing {
|
||||
animation: close 0.18s ease-in;
|
||||
animation: close 340ms cubic-bezier(0.5, 0, 0.8, 0.11);
|
||||
}
|
||||
|
||||
.scrollbox::-webkit-scrollbar-thumb {
|
||||
|
|
Loading…
Reference in a new issue