FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-19 07:56:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor(web/transitions): improve scale fade transition

Browse Source
This commit is contained in:
Luke
2023-01-02 19:33:50 +01:00
parent 9f1ae6184a
commit 7d9e76b043
1 changed files with 3 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/transitions/ScaleFade.tsx
View File

@@ -3,13 +3,12 @@ import { AnimatePresence, motion } from 'framer-motion';
const ScaleFade: React.FC<{ visible: boolean; children: React.ReactNode }> = ({ visible, children }) => { const ScaleFade: React.FC<{ visible: boolean; children: React.ReactNode }> = ({ visible, children }) => {
return ( return (
<> <>
<AnimatePresence initial={false}> <AnimatePresence>
{visible && ( {visible && (
<motion.div <motion.div
initial={{ opacity: 0, scale: 0.95 }} initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, scale: 1, transition: { duration: 0.2, ease: [0.4, 0, 1, 1] } }}
exit={{ opacity: 0, scale: 0.95 }} exit={{ opacity: 0, scale: 0.95, transition: { duration: 0.1, ease: [0, 0, 0.2, 1] } }}
transition={{ duration: 0.1 }}
> >
{children} {children}
</motion.div> </motion.div>