React分页组件按钮激活与段落切换无过渡效果问题

一、按钮激活状态过渡失效的解决 #

你当前通过自定义active属性控制按钮状态，存在两个问题导致过渡失效：

1. React中布尔属性传递方式有误，你将布尔值转成了字符串"true"/"false"，虽CSS能选中，但用className标记激活状态更规范，也能避免属性值类型带来的潜在问题。
2. 用className控制状态更贴合CSS过渡的触发逻辑，确保属性变化是连续可过渡的。

修改后的按钮组件及CSS： #

// 调整TabButton组件，接收selected并通过className控制激活状态
function TabButton({ children, handleClick, index, selected }) {
    return (
        <li>
            <button 
                className={selected === index ? "active" : ""} 
                onClick={handleClick}
            >
                {children}
            </button>
        </li>
    );
}

// 在Pagination组件中调用时传入selected状态
<TabButton index={0} selected={selected} handleClick={() => handleClick(0)}>about us</TabButton>
<TabButton index={1} selected={selected} handleClick={() => handleClick(1)}>why choose us</TabButton>
<TabButton index={2} selected={selected} handleClick={() => handleClick(2)}>our mission</TabButton>

.headers button {
    border: 0;
    color: #9b9b9b;
    border-bottom: 3px solid #9b9b9b;
    background-color: transparent;
    transition: all 0.3s ease-in-out;
}

// 改用className选中激活状态的按钮
.headers button.active {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.headers button:hover {
    color: var(--primary-color);
}

二、段落内容切换无过渡的解决 #

当前直接替换<p>标签内的内容，.paragraph元素始终存在，opacity属性未发生变化，因此过渡不会触发。可以通过状态控制opacity变化实现内容切换的淡入过渡：

修改后的Pagination组件代码： #

import { useState, useEffect } from 'react';

function Pagination() {
    const [selected, setSelected] = useState(0);
    // 新增状态控制内容透明度
    const [contentOpacity, setContentOpacity] = useState(1);

    function TabButton({ children, handleClick, index, selected }) {
        return (
            <li>
                <button 
                    className={selected === index ? "active" : ""} 
                    onClick={handleClick}
                >
                    {children}
                </button>
            </li>
        );
    }

    function handleClick(index) {
        // 切换前先把透明度设为0
        setContentOpacity(0);
        setSelected(index);
    }

    // 选中项更新后，延迟恢复透明度触发过渡
    useEffect(() => {
        const timer = setTimeout(() => {
            setContentOpacity(1);
        }, 50); // 给DOM更新留短暂时间，确保过渡生效
        return () => clearTimeout(timer);
    }, [selected]);

    return (
        <div className="pagination-container">
            <div className="pagination-right">
                <h3>Discover New Horizon</h3>
                <div className="headers">
                    <ul>
                        <TabButton index={0} selected={selected} handleClick={() => handleClick(0)}>about us</TabButton>
                        <TabButton index={1} selected={selected} handleClick={() => handleClick(1)}>why choose us</TabButton>
                        <TabButton index={2} selected={selected} handleClick={() => handleClick(2)}>our mission</TabButton>
                    </ul>
                </div>

                <div className='paragraph' style={{ opacity: contentOpacity }}>
                    <p>{pagins[selected].content}</p>
                </div>
            </div>
        </div>
    );
}

.paragraph {
    transition: opacity 0.3s ease-in-out;
}

修改后，按钮激活状态切换会有平滑的颜色过渡，段落内容切换时也会触发淡入过渡效果。

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