Как запустить анимацию при изменении состояния с помощью styled-компонентов в ReactJs

Question

Я пытаюсь показать строку текста, которая хранится в состоянии как «история», и каждый раз, когда состояние (текст) изменяется, я хочу, чтобы анимация запускалась.Проблема в том, что анимация запускается при загрузке страницы, но не после изменения состояния.Я рассмотрел React Transition Team и некоторые другие методы, такие как удаление и повторное добавление анимации из CSS, но ничего не кажется очень элегантным, когда я работаю со стилевыми компонентами.

Что было бы наиболее элегантным способомрешить эту проблему с помощью styled-components?

Ниже приведен фрагмент моего кода с методом анимации и метода рендеринга компонентов.

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 обрабатываеткаждый из них как новый компонент.

Вот быстрая и простая песочница