Я начал проект с next.js, используя движение кадра и интерфейс чакры. Анимации перехода и наведения работают. Но элемент dom исчезает до окончания анимации выхода. Вот мои фрагменты кода.
<AnimatePresence exitBeforeEnter>
{!isRecentStoryHovered && (
<motion.div key = "modal" initial = {{ opacity: 0 }} animate = {{ opacity: 1 }} exit = {{ opacity: 0 }} transition = {{ duration: 2, ease: "easeInOut", when: "afterChildren" }}>
<Flex gap = "2">
<Button borderRadius = "full" w = "10" h = "10" variant = "solid" padding = "0">
<IconFileDots color = "white" size = "24" />
</Button>
<Button borderRadius = "full" w = "10" h = "10" variant = "solid" padding = "0">
<IconMessageCircle2 color = "white" size = "24" />
</Button>
</Flex>
</motion.div>
)}
</AnimatePresence>
Я импортировал необходимые вещи правильно.
import { motion, isValidMotionProp, AnimatePresence, useAnimationControls } from "framer-motion";
Но дом исчезает до выхода анимации.
Я нашел проблему. Этот элемент был дочерним элементом внутри другого элемента motion.div, который был обернут внутри блока пользовательского интерфейса чакры с помощью «функции фабрики чакры». https://chakra-ui.com/getting-started/with-framer
Этот родительский блок чакры сделал мгновенное обновление DOM, которое не может быть захвачено AnimatePresence. Когда я преобразовал свой Chakra Box в обычный motion.div, он заработал. Кроме того, второй метод, показанный в приведенной выше документации, тоже работал. (Используется как реквизит.)