Optimize current song image layout transition
This commit is contained in:
parent
cb823d94e5
commit
3cf7127f56
2 changed files with 7 additions and 6 deletions
|
@ -137,7 +137,7 @@ export const LeftControls = () => {
|
||||||
</ImageWrapper>
|
</ImageWrapper>
|
||||||
)}
|
)}
|
||||||
</AnimatePresence>
|
</AnimatePresence>
|
||||||
<MetadataStack layout>
|
<MetadataStack layout="position">
|
||||||
<LineItem>
|
<LineItem>
|
||||||
<Text
|
<Text
|
||||||
$link
|
$link
|
||||||
|
|
|
@ -4,7 +4,7 @@ import { closeAllModals, openModal } from '@mantine/modals';
|
||||||
import { SpotlightProvider } from '@mantine/spotlight';
|
import { SpotlightProvider } from '@mantine/spotlight';
|
||||||
import { AnimatePresence, motion } from 'framer-motion';
|
import { AnimatePresence, motion } from 'framer-motion';
|
||||||
import { BsCollection } from 'react-icons/bs';
|
import { BsCollection } from 'react-icons/bs';
|
||||||
import { Button, ScrollArea, TextInput } from '/@/renderer/components';
|
import { Button, MotionStack, ScrollArea, TextInput } from '/@/renderer/components';
|
||||||
import { MdOutlineFeaturedPlayList, MdFeaturedPlayList } from 'react-icons/md';
|
import { MdOutlineFeaturedPlayList, MdFeaturedPlayList } from 'react-icons/md';
|
||||||
import {
|
import {
|
||||||
RiAddFill,
|
RiAddFill,
|
||||||
|
@ -124,7 +124,8 @@ export const Sidebar = () => {
|
||||||
justify="space-between"
|
justify="space-between"
|
||||||
spacing={0}
|
spacing={0}
|
||||||
>
|
>
|
||||||
<Stack
|
<MotionStack
|
||||||
|
layout="position"
|
||||||
spacing={0}
|
spacing={0}
|
||||||
sx={{ maxHeight: showImage ? `calc(100% - ${sidebar.leftWidth})` : '100%' }}
|
sx={{ maxHeight: showImage ? `calc(100% - ${sidebar.leftWidth})` : '100%' }}
|
||||||
>
|
>
|
||||||
|
@ -329,16 +330,16 @@ export const Sidebar = () => {
|
||||||
</Accordion>
|
</Accordion>
|
||||||
</Stack>
|
</Stack>
|
||||||
</ScrollArea>
|
</ScrollArea>
|
||||||
</Stack>
|
</MotionStack>
|
||||||
<AnimatePresence
|
<AnimatePresence
|
||||||
initial={false}
|
initial={false}
|
||||||
mode="wait"
|
mode="popLayout"
|
||||||
>
|
>
|
||||||
{showImage && (
|
{showImage && (
|
||||||
<ImageContainer
|
<ImageContainer
|
||||||
key="sidebar-image"
|
key="sidebar-image"
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
exit={{ opacity: 0 }}
|
exit={{ opacity: 0, y: 200 }}
|
||||||
height={sidebar.leftWidth}
|
height={sidebar.leftWidth}
|
||||||
initial={{ opacity: 0, y: 200 }}
|
initial={{ opacity: 0, y: 200 }}
|
||||||
to={AppRoute.NOW_PLAYING}
|
to={AppRoute.NOW_PLAYING}
|
||||||
|
|
Reference in a new issue