strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prevent incorrect magnifying glass animations

Browse Source
This commit is contained in:
Sam Becker 2025-10-04 14:55:11 -05:00
parent 3b6001602a
commit 4a01ee4f9e
1 changed files with 57 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/AppViewSwitcher.tsx
View File

@ -171,11 +171,9 @@ export default function AppViewSwitcher({
noPadding noPadding
/>} />}
</Switcher> </Switcher>
{showSortControl &&
<motion.div <motion.div
initial={animate ? { opacity: 0, scale: 0.5 } : false} initial={animate ? { opacity: 0, width: '0' } : false}
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, width: showSortControl ? 'auto' : '0' }}
exit={{ opacity: 0, scale: 0.5 }}
transition={{ duration: 0.2, ease: 'easeInOut' }} transition={{ duration: 0.2, ease: 'easeInOut' }}
> >
<Switcher <Switcher
@ -222,13 +220,7 @@ export default function AppViewSwitcher({
noPadding noPadding
/>} />}
</Switcher> </Switcher>
</motion.div>} </motion.div>
<motion.div
// Conditional key necessary to halt/resume layout animations
key={animate ? 'search' : 'search-no-animate'}
layout={animate}
transition={{ duration: 0.2, ease: 'easeInOut' }}
>
<Switcher type="borderless"> <Switcher type="borderless">
<SwitcherItem <SwitcherItem
icon={<IconSearch includeTitle={false} />} icon={<IconSearch includeTitle={false} />}
@ -241,7 +233,6 @@ export default function AppViewSwitcher({
width="narrow" width="narrow"
/> />
</Switcher> </Switcher>
</motion.div>
</div> </div>
); );
} }