在反应中动画文本状态变化答案

【问题标题】：Animating text state change in react在反应中动画文本状态变化
【发布时间】：2021-05-27 19:37:02
【问题描述】：

首先让我展示一下我的代码：

import { menuContext } from '../../../../Home';
import Hamburger from '../Hamburger';

function Nav() {

    const {hamburgerToggle} = useContext(menuContext);

    let dataObject = {
        colorAbout: 'orange-rowan',
        colorContact: 'white',
        innerText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volutpat, ullamcorper non ac fermentum dignissim diam molestie. Commodo quam sed suscipit sem. Ut aliquet neque amet, in at. Ut fermentum lectus sit tristique tincidunt viverra non.'
    }

    const [data, setData] = useState(dataObject);

    const setDataContact = () => {
        setData({
            colorAbout: 'white',
            colorContact: 'orange-rowan',
            innerText: 'jopie',
        })
    }
    const setDataAbout = () => {
        setData({
            colorAbout: 'orange-rowan',
            colorContact: 'white',
            innerText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volutpat, ullamcorper non ac fermentum dignissim diam molestie. Commodo quam sed suscipit sem. Ut aliquet neque amet, in at. Ut fermentum lectus sit tristique tincidunt viverra non.',
        })
    }

    return (
        <>
            <div className="bg-black z-50 border-r border-brokenblack-rowan w-full md:w-nav absolute left-0 h-14 md:h-full flex items-center pl-5 md:pl-0 md:justify-center">
                <Hamburger hamburger="arrowturn" />
            </div>
            <div className={`nav-transition text-xl font-light bg-black h-full w-full md:w-4/12 -left-full  opacity-0 z-40 md:z-10 absolute ${hamburgerToggle} flex flex-col justify-center`}>
                <div className={`pl-5 pr-5 md:pl-nav md:pr-65`}>
                    <ul className="mb-10">
                        <li onClick={setDataAbout} className={`cursor-pointer inline mr-5 text-${data.colorAbout}`}>about</li>
                        <li onClick={setDataContact} className={`cursor-pointer inline mr-5 text-${data.colorContact}`}>contact</li>
                    </ul>
                    <p className="text-white font-light text-base mb-10 minimum-height">
                        {data.innerText}
                    </p>
                    <a href="#" className="text-sm text-gray-rowan">cv bekijken</a>
                </div>
                <div className="absolute bottom-0 h-14 border-t border-brokenblack-rowan w-full pl-20 flex flex-col justify-center">
                </div>
            </div>
        </>
    )
}

export default Nav;

如您所见，我有 2 个名为 about 和 contact 的菜单项。当我点击其中任何一个时，我状态中的对象会发生变化，因此我页面上的信息也会发生变化。（这是这样做的好方法吗？）。

现在我想做的是在{data.innerText} 上实现一个淡入淡出动画，所以当状态改变时，它会从旧文本淡入新文本。我尝试了多种方法（React Spring、基于类的 CSS 转换、普通 CSS 转换），但我就是无法理解它！

有人可以帮我解决这个问题吗？提前致谢。

【问题讨论】：

stackoverflow.com/questions/52507110/…

标签： javascript css reactjs animation

【解决方案1】：

实现您所追求的结果的一种方法是使用 css 过渡在基于“活动索引”的样式之间淡入淡出。

这是与您的示例不同的方法；而不是使用当前文本设置状态 - 我们设置应该显示的索引：

  const [activeIndex, setActiveIndex] = useState();

然后，当单击一个项目时，我们应该将该索引设置为活动

<li>
  <button
    onClick={() => setActiveIndex(1)} // ?
    className="p-2 w-20 bg-blue-700"
    type="button"
  >
    1
  </button>
</li>

在视图中，我们现在可以根据索引是否处于活动状态有条件地应用不透明度：

<div
  className={`transition duration-500 ${ activeIndex === 1 ? "opacity-100" : "opacity-0" }`}
>
  This is the first index
</div>

<div
  className={`transition duration-500 ${ activeIndex === 2 ? "opacity-100" : "opacity-0" }`}
>
  This is the second index
</div>

您当然也可以使用其他过渡属性。

查看this sandbox中的扩展示例

【讨论】：