如何使用React Transition Group转换文本更改？

Question

我有一个按钮，可以根据当前状态将状态从true或false更改。 当此状态更改时，元素上的文本也会更改。

我尝试使用来自“ react-transition-group”的Transition，因为我使用的是Emotion样式。

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>
)

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

Answer 1

我设法通过使用不同的状态来跟踪动画状态和一个计时器来使其工作，该计时器将在其过期后将状态设置为true。 基本上，这将在“退出”后将动画状态重新设置为“已进入”，以便可以播放下一个动画。

我对这种解决方案并不完全满意，如果有人可以提供，我希望有更好的解决方案。