添加transition延迟后Framer Motion的whileHover与whileTap失效问题

问题根源 #

你直接在motion.div上设置的全局transition={{ delay: 2 }}会作用于所有状态切换动画——包括从initial到animate的入场动画，以及whileHover、whileTap的交互动画。这就导致hover和tap触发的动画也要等2秒才会执行，看起来跟失效了一样。

解决方案 #

方案1：给交互动画单独指定过渡配置

直接在whileHover和whileTap内部设置无延迟的过渡，覆盖全局配置：

<motion.div
  animate={{ x: 0, y: 0 }}
  initial={{ x: -100, y: -100, opacity: 0.6 }}
  whileHover={{ 
    scale: 1.5, 
    opacity: 1,
    transition: { delay: 0 } // 强制hover动画立即触发
  }}
  drag={true}
  transition={{ delay: 2 }} // 仅作用于入场动画
  whileTap={{ 
    scale: 0.8, 
    opacity: 1,
    transition: { delay: 0 } // 强制tap动画立即触发
  }}
  key={genre.id}
  className="cursor-pointer mx-6 my-10 text-2xl text-white list-none"
>
  <Icon key={key} />
</motion.div>

方案2：用Variants拆分状态与过渡（更推荐）

通过variants把不同状态的动画和过渡逻辑分开管理，避免全局配置冲突：

// 提前定义所有状态的动画与过渡
const iconVariants = {
  initial: { x: -100, y: -100, opacity: 0.6 },
  animate: { 
    x: 0, 
    y: 0,
    transition: { delay: 2 } // 仅入场动画延迟2秒
  },
  hover: { 
    scale: 1.5, 
    opacity: 1,
    transition: { delay: 0 } // hover无延迟
  },
  tap: { 
    scale: 0.8, 
    opacity: 1,
    transition: { delay: 0 } // tap无延迟
  }
}

// 组件中使用
<motion.div
  variants={iconVariants}
  initial="initial"
  animate="animate"
  whileHover="hover"
  drag={true}
  whileTap="tap"
  key={genre.id}
  className="cursor-pointer mx-6 my-10 text-2xl text-white list-none"
>
  <Icon key={key} />
</motion.div>

额外说明 #

如果不需要给hover/tap设置特殊过渡曲线，甚至可以省略whileHover和whileTap里的transition配置——因为Framer Motion的默认过渡是无延迟的，会自动优先使用状态内部的过渡规则，而非全局配置。

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