reactjs - 如何在 ReactJs 中使用样式组件触发状态变化动画

Question

我正在尝试显示存储在状态中的一行文本作为“故事”，并且每次状态(文本)更改时我都希望动画运行。问题在于动画在页面加载时运行，但在状态更改后不会运行。我研究了 React Transition Team 和其他一些方法，例如从 css 中删除和重新添加动画，但是当我使用样式化组件时，似乎没有什么是非常优雅的。

用样式组件解决这个问题的最优雅的方法是什么？

下面是我的代码片段，其中包含样式组件动画和渲染方法。

const keyframe = keyframes`
  0% {
    letter-spacing: 1em;
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
`

const Story = styled.h2`
  -webkit-animation: ${keyframe} 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: ${keyframe} 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
`

 render() {
   return (
            <Wrapper>
              <TextWrapper>
                <Story state={this.state.currentStory}>{this.state.currentStory}</Story>
              </TextWrapper>
            </Wrapper>
          );

Answer 1

当 currentStory 发生变化时，您需要强制 React 卸载并重新挂载您的组件。

试试这个:

render() {
    const story = this.state.currentStory
    return (
        <Wrapper>
          <TextWrapper>
            <Story key={story} state={story}>{story}</Story>
          </TextWrapper>
        </Wrapper>
      );

随着 key 的变化，React 将每一个都视为一个新组件。

这是一个快速的'n'dirty sandbox