fix(settings): added bezier curve to animations

This commit is contained in:
trashtemp 2022-01-21 09:06:55 +01:00
parent 622f2b2bca
commit 4d769f42e1
No known key found for this signature in database
GPG key ID: D1F0DB65081B0FC6
3 changed files with 37 additions and 24 deletions

View file

@ -13,6 +13,21 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
z-index: 1; z-index: 1;
position: relative; 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) =>
props.position === "top" && props.position === "top" &&
css` css`

View file

@ -65,7 +65,7 @@ export function GenericSettings({
setTimeout(() => { setTimeout(() => {
history.replace(state.layout.getLastPath()); history.replace(state.layout.getLastPath());
}, 100); }, 200);
}, [history]); }, [history]);
useEffect(() => { useEffect(() => {

View file

@ -4,33 +4,31 @@
transform: scale(1.2); transform: scale(1.2);
opacity: 0; 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% { 20% {
opacity: 0.5; opacity: 0.5;
} }
50% { 50% {
opacity: 1; 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 */ /* Settings CSS */
@ -84,10 +82,10 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
position: fixed; 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 { &.closing {
animation: close 0.18s ease-in; animation: close 340ms cubic-bezier(0.5, 0, 0.8, 0.11);
} }
.scrollbox::-webkit-scrollbar-thumb { .scrollbox::-webkit-scrollbar-thumb {