md.asif5/osaka
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor animations for improved transitions in App and AccountCreation components

Browse Source
This commit is contained in:
Md Asif 2024-12-23 20:47:13 +05:30
parent cc3943196e
commit 48b9b70c4a
2 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.jsx
View File

@ -25,7 +25,7 @@ function App() {
const location = useLocation(); const location = useLocation();
return ( return (
<LoadingProvider> <LoadingProvider>
<div className="flex flex-col min-h-screen"> <div className="flex flex-col min-h-screen scrollbar">
<Header /> <Header />
<LoadingBarWrapper /> <LoadingBarWrapper />
<main className="overflow-hidden flex flex-grow transition-color-mode md:p-10 2xl:px-70 bg-surface dark:bg-surface-dark"> <main className="overflow-hidden flex flex-grow transition-color-mode md:p-10 2xl:px-70 bg-surface dark:bg-surface-dark">
@ -34,9 +34,9 @@ function App() {
<motion.div <motion.div
className="w-full ovwerflow-hidden" className="w-full ovwerflow-hidden"
key={location.pathname} key={location.pathname}
initial={{ opacity: 0, x: 50 }} initial={{ y: 15, opacity: 0 }}
animate={{ opacity: 1, x: 0 }} animate={{ y: 0, opacity: 1 }}
exit={{ opacity: 0, x: 50 }} exit={{ y: 15, opacity: 0 }}
> >
<AnimatedOutlet /> <AnimatedOutlet />
</motion.div> </motion.div>

12
src/pages/AccountCreation.jsx
View File

@ -196,9 +196,9 @@ function AccountCreation() {
className="fixed z-50 inset-0 flex items-center justify-center bg-black/50" className="fixed z-50 inset-0 flex items-center justify-center bg-black/50"
> >
<motion.div <motion.div
initial={{ scale: 0.8 }} initial={{ y: 15, opacity: 0 }}
animate={{ scale: 1 }} animate={{ y: 0, opacity: 1 }}
exit={{ scale: 0.8 }} exit={{ y: 15, opacity: 0 }}
className="flex flex-col items-center bg-white p-4 py-8 rounded-3xl w-[60%] max-h-[80%] overflow-auto font-body" className="flex flex-col items-center bg-white p-4 py-8 rounded-3xl w-[60%] max-h-[80%] overflow-auto font-body"
> >
<h2 className="text-xl mb-4">Select Product</h2> <h2 className="text-xl mb-4">Select Product</h2>
@ -246,9 +246,9 @@ function AccountCreation() {
<AnimatePresence> <AnimatePresence>
{notification.visible && ( {notification.visible && (
<motion.div <motion.div
initial={{ opacity: 0 }} initial={{ y: 15, opacity: 0 }}
animate={{ opacity: 1 }} animate={{ y: 0, opacity: 1 }}
exit={{ opacity: 0 }} exit={{ y: 15, opacity: 0 }}
className={clsx( className={clsx(
"p-4 mb-8 font-body text-center text-xl rounded-2xl flex items-center justify-center gap-2", "p-4 mb-8 font-body text-center text-xl rounded-2xl flex items-center justify-center gap-2",
notification.type === "error" notification.type === "error"