Кнопки летят во всех направлениях с движением ⇐ Javascript

[Anonymous]

У меня есть проект с использованием React и Motion. Этот пользовательский интерфейс позволяет пользователю переключаться между двумя представлениями, одной вертикальной и одной горизонтальной. Это происходит потому, что страница резко меняется. Сделайте пользовательский интерфейс довольно скучным, и это не мое намерение. Я хочу сохранить все различные анимации, но просто ограничить их наложением.const { setComic, comic, layout, modal } = useComicReaderContext();
useEffect(() => {
setComic(currentComic);
});
return (


{layout === comicLayoutModes.VERTICAL && (

)}
{layout === comicLayoutModes.SINGLE_PAGE && (
// renders 1 image at a time.
)}
{modal && (

)}


< /code>
и сам интерфейс: < /p>
const { title, author, tags, likes, price } = comic;
const { setModal, setDrawer, drawer } = useComicReaderContext();

return (




{`some buttons`}


{/* center col THISONE goes nuts when changing view*/}
onDismiss(e)}
transition={{ ease: 'easeInOut' }}
className="flex h-full w-full shrink flex-col items-center justify-center md:w-8/12"
>
onDismiss(e)}
className="cursor-pointer inline-flex h-20 w-[150px] items-center justify-center rounded-3xl bg-primary p-2 text-sm text-black hover:shadow-[0_0_10px_1px_rgba(250,250,250,1)] md:w-[250px] md:p-4 md:text-lg"
>
Click to continue reading


{/* right col */}

className="flex flex-col items-center"
>

handleToggle()}
className="border-gray rounded-full w-[50px] h-[30px] p-1 border-2 bg-body cursor-pointer flex items-center"
>
{layout === comicLayoutModes.VERTICAL &&

}
{layout === comicLayoutModes.SINGLE_PAGE &&

}



{layout === comicLayoutModes.VERTICAL ? "Vertical" : "Single Page"}




{drawer && }



);
};


Подробнее здесь: https://stackoverflow.com/questions/797 ... ith-motion