如何使用 ReactJs 中的样式组件触发状态更改动画答案

【问题标题】：How to trigger animation on state change with styled-components in ReactJs如何使用 ReactJs 中的样式组件触发状态更改动画
【发布时间】：2019-10-26 23:07:56
【问题描述】：

我试图将存储在状态中的一行文本显示为“故事”，并且每次状态（文本）更改时，我都希望动画运行。问题是动画在页面加载时运行，而不是在状态改变后运行。我研究了 React Transition Team 和其他一些方法，例如从 css 中删除和重新添加动画，但是当我使用 styled-components 时，似乎没有什么很优雅。

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

下面是我的代码中带有样式组件动画和渲染方法的 sn-p。

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

【问题讨论】：

标签： reactjs css-animations styled-components

【解决方案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

【讨论】：