如何使用 CSSTransition 在内容更改时添加过渡效果答案

【问题标题】：How to add transition effect when content changes in react using CSSTransition如何使用 CSSTransition 在内容更改时添加过渡效果
【发布时间】：2023-01-18 19:17:19
【问题描述】：

const Component = () => {
    const [newName, setnewName] = useState('');
    
      const updateName = (max: number) => {
  //logic to update newName
  };
  return (
    <>
    
            <div>{newName}</div>
          
       
    </>
  );
};
export default Component;

每当新的 Name 变量的值发生变化时，我想在 ui 中为它添加一些效果。有什么办法可以做到这一点？

【问题讨论】：

您可以通过向 div 添加 CSS 类来触发动画。也有自动动画状态变化的库，例如：auto-animate.formkit.com

标签： css reactjs animation

【解决方案1】：

是的。您可以使用 useEffect 挂钩来实现此目的，并将 newName 状态添加为依赖项。

例如，请看以下内容。每当变量状态发生变化时，我都会通过console.log("hey, newName changed")进行演示。

const Component = () => {
    const [newName, setnewName] = useState('');

    useEffect(() => {console.log("hey, newName changed!"}, [newName])
    
  const updateName = (max: number) => {

  };
  return (
    <>
    
            <div>{newName}</div>
          
       
    </>
  );
};
export default Component;

使用 useState 导入它。

现在，你可能会问“是的，但你只是在安慰一些东西，实际上并没有对 CSS 过渡做任何事情”。放心，您可以采用类似的方法。

useEffect 钩子只是一个监视状态变化的函数。从回调函数中，只需添加您的自定义 css 转换类，或触发一个更改 CSS 的函数。

因为我不确定你想要什么样的过渡效果，因为你没有在你的问题中指定它，所以请原谅我不能提供一个具体的例子。我希望这可以帮助你。

【讨论】：