hax/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-12-17 08:54:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: add animation to more/less button

Browse source
This commit is contained in:
MAZE 2023-10-18 12:46:27 +03:30
parent a53800c6b1
commit b849b3aecd
1 changed files with 17 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/sounds/sounds.tsx
View file

@ -1,4 +1,5 @@
import { useState, useMemo, useCallback } from 'react'; import { useState, useMemo, useCallback } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import { Sound } from '@/components/sound'; import { Sound } from '@/components/sound';
import { useLocalStorage } from '@/hooks/use-local-storage'; import { useLocalStorage } from '@/hooks/use-local-storage';
@ -65,7 +66,13 @@ export function Sounds({ functional, id, sounds }: SoundsProps) {
</div> </div>
{sounds.length > 6 && ( {sounds.length > 6 && (
<button <AnimatePresence initial={false} mode="wait">
<motion.button
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.85 }}
initial={{ opacity: 0, scale: 0.85 }}
key={showAll ? `${id}-show-less` : `${id}-show-more`}
transition={{ duration: 0.2 }}
className={cn( className={cn(
styles.button, styles.button,
hasHiddenSelection && !showAll && styles.active, hasHiddenSelection && !showAll && styles.active,
@ -73,7 +80,8 @@ export function Sounds({ functional, id, sounds }: SoundsProps) {
onClick={() => setShowAll(prev => !prev)} onClick={() => setShowAll(prev => !prev)}
> >
{showAll ? 'Show Less' : 'Show More'} {showAll ? 'Show Less' : 'Show More'}
</button> </motion.button>
</AnimatePresence>
)} )}
</div> </div>
); );