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

当React更改时，您需要强制currentStory卸载并重新安装组件。

尝试一下：

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

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

这里是个肮脏的Python lambda's binding to local values

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

1 个答案: