实现 Chakra UI 组件 Hover 效果的平滑过渡-html教程-PHP中文网

实现 Chakra UI 组件 Hover 效果的平滑过渡

DDD

发布： 2025-09-07 18:39:01

原创

188人浏览过

实现 chakra ui 组件 hover 效果的平滑过渡

本文旨在解决 Chakra UI 组件（如 Stack 或 Div）在鼠标悬停时无法实现平滑过渡效果的问题。通过修改组件的 style 属性，确保在鼠标悬停和离开时都应用 transition 属性，从而实现流畅的动画效果。本文将提供详细的代码示例和解释，帮助开发者轻松实现所需的交互效果。

在使用 Chakra UI 构建用户界面时，我们经常需要在鼠标悬停时改变组件的样式，例如改变位置、颜色或大小。为了提供更好的用户体验，我们希望这些变化能够平滑过渡，而不是瞬间切换。然而，有时我们可能会遇到过渡效果无法正常工作的问题。

以下是一个使用 Chakra UI 的 Stack 组件，尝试在鼠标悬停时向上移动的例子，但过渡效果未能生效：

import { Stack } from "@chakra-ui/react";
import { useState } from "react";

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

    function handleMouseEnter() {
        setHovering(true);
    }

    function handleMouseLeave() {
        setHovering(false);
    }

    return (
        <Stack
            style={{
                position: 'relative',
                top: 0,
                top: isHovering ? '-10px' : '',
                transition: isHovering ? 'top ease 0.5s' : ''
            }}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
        >
            Hover Me!
        </Stack>
    );
};

export default Card;

登录后复制

问题分析

上述代码的问题在于，当鼠标离开组件时，transition 属性被设置为空字符串 ''，导致过渡效果被移除。因此，组件在回到原始位置时，不会有任何动画效果。

解决方案

为了解决这个问题，我们需要确保 transition 属性始终存在，即使在鼠标离开组件时也是如此。我们可以将 top 属性的值设置为 '0px'，而不是空字符串 ''，并且始终应用 transition 属性。

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

修改后的代码如下：

import { Stack } from "@chakra-ui/react";
import { useState } from "react";

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

    function handleMouseEnter() {
        setHovering(true);
    }

    function handleMouseLeave() {
        setHovering(false);
    }

    return (
        <Stack
            style={{
                position: 'relative',
                top: isHovering ? '-10px' : '0px',
                transition: 'top ease 0.5s',
            }}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
        >
            Hover Me!
        </Stack>
    );
};

export default Card;

登录后复制

代码解释

top: isHovering ? '-10px' : '0px': 当 isHovering 为 true (鼠标悬停) 时，top 属性设置为 '-10px'，组件向上移动 10 像素。当 isHovering 为 false (鼠标离开) 时，top 属性设置为 '0px'，组件回到原始位置。
transition: 'top ease 0.5s': 无论鼠标是否悬停，transition 属性始终设置为 'top ease 0.5s'。这意味着 top 属性的变化将以 ease 缓动函数在 0.5 秒内平滑过渡。

注意事项