diff --git a/src/renderer/components/virtual-grid/grid-card/poster-card.tsx b/src/renderer/components/virtual-grid/grid-card/poster-card.tsx index 44a3c3ca3..ee8f29a72 100644 --- a/src/renderer/components/virtual-grid/grid-card/poster-card.tsx +++ b/src/renderer/components/virtual-grid/grid-card/poster-card.tsx @@ -82,12 +82,14 @@ interface ImageProps { } const Image = styled.img` - ${fadeIn}; width: ${({ height }) => `${height}px`}; height: ${({ height }) => `${height}px`}; object-fit: cover; border: 0; border-radius: 2px; + + ${fadeIn} + animation: fadein 0.3s ease-in-out; `; const ControlsContainer = styled.div` diff --git a/src/renderer/features/player/components/left-controls.tsx b/src/renderer/features/player/components/left-controls.tsx index b3540e17a..0f388f691 100644 --- a/src/renderer/features/player/components/left-controls.tsx +++ b/src/renderer/features/player/components/left-controls.tsx @@ -32,11 +32,13 @@ const MetadataStack = styled(motion.div)` `; const Image = styled(motion(Link))` - ${fadeIn}; width: 70px; height: 70px; filter: drop-shadow(0 0 5px rgb(0, 0, 0, 100%)); + ${fadeIn}; + animation: fadein 0.2s ease-in-out; + button { display: none; } @@ -91,7 +93,7 @@ export const LeftControls = () => { transition={{ duration: 0.3, ease: 'easeInOut' }} > {song?.imageUrl ? ( - + ) : ( <>
` - ${fadeIn}; position: relative; height: ${(props) => props.height}; + ${fadeIn}; + animation: fadein 0.2s ease-in-out; + button { display: none; } @@ -188,7 +190,7 @@ export const Sidebar = () => { transition={{ duration: 0.3, ease: 'easeInOut' }} > {imageUrl ? ( - + ) : (