oiupoyt/OneLauncher-Cracked
1
1
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity

feat: Changed Page Animation transition properties

Browse source
This commit is contained in:
LynithDev 2024-05-12 11:19:49 +02:00
parent 823c49f6c9
commit 4fef2e432b
2 changed files with 21 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
desktop/src/globals.css
View file

@ -35,3 +35,18 @@ h4 { @apply text-lg font-medium; }
.os-hide-horizontal-scrollbar > .os-scrollbar-horizontal {
display: none;
}
.page-animation-enter-active, .page-animation-leave-active {
transition: opacity 200ms, transform 250ms;
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.page-animation-enter, .page-animation-leave-to {
opacity: 0;
transform: translateX(-75px);
}
.page-animation-enter-to, .page-animation-leave {
opacity: 1;
transform: translateX(0);
}

49
desktop/src/ui/components/AnimatedRoutes.tsx
View file

@ -2,52 +2,15 @@ import type { ParentProps } from 'solid-js';
import { Transition } from 'solid-transition-group';
function AnimatedRoutes(props: ParentProps) {
const keyframesEnter = [
{
opacity: 0,
transform: 'translateX(-100px)',
},
{
opacity: 1,
transform: 'translateX(0px)',
},
];
const keyframesExit = [
{
opacity: 1,
transform: 'translateX(0px)',
},
{
opacity: 0,
transform: 'translateX(100px)',
},
];
const properties: KeyframeAnimationOptions = {
duration: 100,
easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
};
return (
<Transition
mode="outin"
onEnter={(element, done) => {
const animation = element.animate(
keyframesEnter,
properties,
);
animation.onfinish = done;
}}
onExit={(element, done) => {
const animation = element.animate(
keyframesExit,
properties,
);
animation.onfinish = done;
}}
enterClass="page-animation-enter"
enterActiveClass="page-animation-enter-active"
enterToClass="page-animation-enter-to"
exitClass="page-animation-leave"
exitActiveClass="page-animation-leave-active"
exitToClass="page-animation-leave-to"
>
{props.children}
</Transition>