Chakra UI中Stack/div组件hover时transition过渡不生效如何解决

你的代码过渡不生效核心是两个写法问题：

• 你只在hover状态给元素加了transition属性，非hover状态下该属性为空，元素没有常驻的过渡规则，状态切换时自然不会触发动画
• 非hover状态的top值设置为空字符串''，不是明确的可计算长度值，浏览器无法在两个状态之间做插值过渡
• 额外注意：isHovering初始值设为空字符串虽然能靠JS隐式转换运行，但最好初始值就设为布尔值false，避免隐式转换带来的意外问题

修复原有写法 #

把过渡属性设为常驻，非hover状态的top值明确设为0即可：

const Card = () => {
  const [isHovering, setHovering] = useState(false)

  const handleMouseEnter = () => setHovering(true)
  const handleMouseLeave = () => setHovering(false)

  return (
    <Stack
      style={{
        position: 'relative',
        top: isHovering ? '-10px' : '0',
        transition: 'top ease 0.5s'
      }}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      {/* 卡片内容 */}
    </Stack>
  )
}

更推荐的Chakra UI原生方案 #

Chakra UI自带样式系统原生支持伪类状态和过渡配置，完全不需要手动绑定鼠标事件、维护hover状态，代码更简洁也更不容易出问题：

const Card = () => {
  return (
    <Stack
      position="relative"
      top="0"
      transition="top ease 0.5s"
      _hover={{
        top: "-10px"
      }}
    >
      {/* 卡片内容 */}
    </Stack>
  )
}

如果需要同时加其他hover效果（比如阴影变化），直接扩展对应属性即可，把transition设为all ease 0.5s就能覆盖所有属性的过渡：

<Stack
  position="relative"
  top="0"
  boxShadow="sm"
  transition="all ease 0.5s"
  _hover={{
    top: "-10px",
    boxShadow: "lg"
  }}
>
  {/* 卡片内容 */}
</Stack>

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