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 smooth transition

Browse source
This commit is contained in:
MAZE 2023-10-17 19:57:24 +03:30
parent b7c7d40bf9
commit e7fc951310
2 changed files with 21 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/sound/like/like.module.css
View file

@ -13,6 +13,7 @@
background-color: var(--color-neutral-100); background-color: var(--color-neutral-100);
color: var(--color-foreground-subtle); color: var(--color-foreground-subtle);
cursor: pointer; cursor: pointer;
line-height: 0;
outline: none; outline: none;
&.isFavorite { &.isFavorite {

10
src/components/sound/like/like.tsx
View file

@ -1,4 +1,5 @@
import { BiHeart, BiSolidHeart } from 'react-icons/bi/index'; import { BiHeart, BiSolidHeart } from 'react-icons/bi/index';
import { AnimatePresence, motion } from 'framer-motion';
import { useFavoriteStore } from '@/store/favorite'; import { useFavoriteStore } from '@/store/favorite';
import { cn } from '@/helpers/styles'; import { cn } from '@/helpers/styles';
@ -14,6 +15,7 @@ export function Like({ id }: LikeProps) {
const toggleFavorite = useFavoriteStore(state => state.toggleFavorite); const toggleFavorite = useFavoriteStore(state => state.toggleFavorite);
return ( return (
<AnimatePresence initial={false} mode="wait">
<button <button
aria-label="Add Sound to Favorites" aria-label="Add Sound to Favorites"
className={cn(styles.favoriteButton, isFavorite && styles.isFavorite)} className={cn(styles.favoriteButton, isFavorite && styles.isFavorite)}
@ -21,8 +23,16 @@ export function Like({ id }: LikeProps) {
e.stopPropagation(); e.stopPropagation();
toggleFavorite(id); toggleFavorite(id);
}} }}
>
<motion.span
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
initial={{ opacity: 0 }}
key={isFavorite ? `${id}-is-favorite` : `${id}-not-favorite`}
> >
{isFavorite ? <BiSolidHeart /> : <BiHeart />} {isFavorite ? <BiSolidHeart /> : <BiHeart />}
</motion.span>
</button> </button>
</AnimatePresence>
); );
} }