Компоненты, не анимируемые с помощью response-transition-group, просто мгновенно обновляются?

Question

Я пытаюсь анимировать компонент боковой панели после первого раздела на этой странице . Когда я следую за этим, компонент не оживляет, а просто монтирует / размонтирует.

Компонент SidePage выглядит следующим образом:

import React from "react"
import { TransitionGroup, CSSTransition } from "react-transition-group"
import "./sidePage.css"

class SidePage extends React.Component {
  componentWillMount() {
    console.log("will mount")
  }
  componentDidMount() {
    console.log("did mount")
  }
  componentWillUnmount() {
    console.log("will unmount")
  }
  render() {
    const { content, sidePageOpen } = this.props
    return (
      <TransitionGroup component={null}>
        {sidePageOpen && (
          <CSSTransition key={content.id} classNames="sidepage" timeout={2000}>
            <div
              key={content.id}
              className="sidepage"
              dangerouslySetInnerHTML={{ __html: content.html }}
            />
          </CSSTransition>
        )}
      </TransitionGroup>
    )
  }
}

export default SidePage

и файл css:

.sidepage-enter {
  opacity: 0;
}
.sidepage-enter-active {
  opacity: 1;
  transition: all 2s;
}
.sidepage-exit {
  opacity: 1;
}
.sidepage-exit-active {
  opacity: 0;
  transition: all 2s;
}

.sidepage {
  background: white;
  padding: 10px;
  height: 100%;
  width: 90vw;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  opacity: 0.4;
  transition: all 0.6s;
}

Базовые вещи, я думаю - sidePageOpen - логическое состояние, переданное вниз, у меня есть кнопка на другой странице, которая переключает это состояние. Если у кого-то есть какие-либо идеи / предложения, которые были бы блестящими и ценными.

Answer 1

В конце концов нашел решение - у меня был стилизованный <Wrapper> div, созданный с использованием стилей emotion.sh, я использовал его для хранения всего моего контента, не уверен, почему, но это не позволяло никакой анимации - изменив это на простой <div>, казалось, исправил это.

Редактировать: Возможно, потому что он воссоздает компонент Wrapper при каждом изменении состояния.

Answer 2

Удалить свойство непрозрачности из класса боковой страницы.

.sidepage {
  background: white;
  padding: 10px;
  height: 100%;
  width: 90vw;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  opacity: 0.4; // remove me
  transition: all 0.6s;
}

Элемент get добавлен с классом sidepage с непрозрачностью 0,4, что нарушает анимацию. Рабочая демоверсия здесь