实现 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 属性。

会译·对照式翻译

会译是一款AI智能翻译浏览器插件，支持多语种对照式翻译

下载

修改后的代码如下：

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;

代码解释

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

注意事项

• 确保 position 属性设置为 relative、absolute 或 fixed，以便 top 属性生效。
• 可以根据需要调整 transition 属性的值，例如更改缓动函数或过渡时间。
• 此方法适用于其他 CSS 属性，例如 opacity、color 或 transform。

总结

通过确保 transition 属性始终存在，我们可以轻松实现 Chakra UI 组件在鼠标悬停时的平滑过渡效果。这种方法不仅简单易懂，而且可以应用于各种 CSS 属性，从而为用户提供更流畅、更友好的交互体验。 希望本文能够帮助您解决在使用 Chakra UI 时遇到的过渡效果问题。