код в компаненте:
{ open && (
<motion.div
initial={{width: "0", opacity: 0, color: '#fff'}}
animate={{width: "100%", opacity: 1, color: '#222'}}
exit={{width: "0", opacity: 0, color: '#fff'}}
transition={{ type: "spring", stiffness: 100 }}
>
<SubjectsList/>
</motion.div>
)}
Когда open is true проигрывается анимация и появляются компоненты которые должны появляться, тут всё ок.
А вот когда open is false то анимация не проигрывается (что в целом понятно, так как у нас просто из дома уходит этот компонент). Как можно сделать что бы анимация проигрывалась в том числи и когда open становится false ?
для таких случаев используется AnimatePresence. Почитай про него в доке
Спасибо, работает?
Обсуждают сегодня