Задержка движения кадра при onMouseLeave
Я пытаюсь создать эффект наведения, используя onMouseEnter и onMouseLeave. У меня есть родительский div, когда onMouseEnter срабатывает в div, два дочерних div будут переводить X с -100 на 0, на дочернем div есть задержка 0,4 с. Посмотреть песочницу можно здесь: https://codesandbox.io/p/devbox/g7g8cr?migrateFrom=zwdwr9,
Когда onMouseLeave первый дочерний элемент быстро перемещается влево перед вторым дочерним элементом.
Мне нужно, чтобы onMouseLeave первый элемент div переместился влево после того, как второй полностью переместился влево.
Ответы 1
Вы можете изменить задержку дочернего элемента div в зависимости от состояния наведения следующим образом:
const STAGGER_DELAY = 0.4;
...
<motion.div
initial = {{
x: -130,
}}
animate = {isHover ? { x: 130 } : {}}
transition = {{ duration: 0.5, delay: isHover ? 0 : STAGGER_DELAY }}
className = "size-20 bg-green-500 absolute top-10 left-10"
></motion.div>
<motion.div
initial = {{
x: -150,
}}
animate = {isHover ? { x: 0 } : {}}
transition = {{ duration: 0.5, delay: isHover ? STAGGER_DELAY : 0 }}
className = "size-20 bg-yellow-500 absolute top-10 left-10"
></motion.div>
Я создал этот рабочий пример. В моем примере есть два компонента: <Basic /> и <Advanced />. Я создал компонент Advanced, чтобы продемонстрировать, как можно воспользоваться преимуществами ступенчатого перехода Framer Motion и не беспокоиться об оркестровке дочерних элементов div. Это значительно упрощает добавление дополнительных дочерних элементов div, если вы хотите.