Framer Motion：onMouseLeave时子元素退场顺序调整需求求助

核心思路是通过**CSS过渡延迟（transition-delay）**精准控制鼠标离开时的动画顺序：让第一个子元素的离开延迟等于第二个子元素的动画时长，确保第二个完全左移后第一个才开始移动。

具体实现方案 #

1. React组件（状态类控制）

import { useState } from 'react';

export default function HoverAnimation() {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div 
      className="hover-parent"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <div className={`hover-child child-1 ${isHovered ? 'active' : ''}`}>子元素1</div>
      <div className={`hover-child child-2 ${isHovered ? 'active' : ''}`}>子元素2</div>
    </div>
  );
}

2. CSS样式（核心逻辑）

.hover-parent {
  position: relative;
  width: 240px;
  height: 120px;
  border: 1px solid #ddd;
  overflow: hidden;
  cursor: pointer;
}

.hover-child {
  position: absolute;
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transform: translateX(-100%);
  /* 统一动画时长 */
  transition: transform 0.4s ease-in-out;
}

.child-1 {
  top: 0;
  background-color: #e74c3c;
  /* 离开时延迟：等于child-2的动画时长 */
  transition-delay: 0.4s;
}

.child-2 {
  top: 50%;
  background-color: #3498db;
  /* 离开时无延迟，立即触发 */
  transition-delay: 0s;
}

/* 鼠标进入时的动画状态 */
.hover-child.active {
  transform: translateX(0);
}

.child-2.active {
  /* 进入时延迟0.4s，和初始需求一致 */
  transition-delay: 0.4s;
}

.child-1.active {
  /* 进入时无延迟，立即触发 */
  transition-delay: 0s;
}

关键逻辑说明 #

• 进入阶段：child-1立即滑入，child-2延迟0.4s后滑入，匹配你最初的需求。
• 离开阶段：child-2立即滑出（0延迟），child-1等待0.4s（即child-2完全滑出的时间）后才开始滑出，完美实现反向顺序。

如果不需要React状态，用纯CSS的:hover伪类也能实现同样效果，逻辑完全一致：

.hover-parent:hover .child-1 {
  transform: translateX(0);
  transition-delay: 0s;
}

.hover-parent:hover .child-2 {
  transform: translateX(0);
  transition-delay: 0.4s;
}

/* 离开时的延迟设置保持不变 */
.child-1 {
  transition-delay: 0.4s;
}

.child-2 {
  transition-delay: 0s;
}

内容的提问来源于stack exchange，提问作者Prajil K