时间戳

首页 > 解决方案 > 如何使用 React 转换组转换文本更改？

javascript - 如何使用 React 转换组转换文本更改？

问题描述

我有一个按钮，可以根据当前状态将状态从真或假更改。当此状态发生变化时，元素上的文本将发生变化。

我尝试使用“react-transition-group”中的转换，因为我使用的是情感风格。

const [animate, setAnimate] = useState(false)

const Heading = styled.h1`
 transition: opacity 0.2s;
 opacity = ${({state}) => (state === 'entering' || state === 'entered' ? 1 : 0)};
`
return (
  <Transition in={animate} timeout={300}>
    {state => <Heading state={state}>{animate ? 'Hello' : 'World'}</Heading>}
  </Transition>
  <button onClick={() => setAnimate(!animate)}>Switch</button>
)

在这里，我试图让“Hello”文本淡出，而“World”文本在状态从 true 变为 false 时淡入。

标签： javascriptreactjsreact-transition-group

解决方案

我设法通过使用不同的状态来跟踪动画状态和一个计时器来让它工作，该计时器将在状态到期后将状态设置回真。基本上，这将在“退出”后将动画状态重置回“进入”，以便下一个动画可以发生。

我对这个解决方案并不完全满意，如果有人可以提供，我想要一个更好的解决方案。

推荐阅读