没有使用react-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

从sidepage类中删除opacity属性。

.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添加了一个不透明度为0.4的sidepage，这就是打破动画。 在这里工作演示

Answer 2

最终找到了解决方案 - 我有一个使用emotion.sh样式组件创建的样式<Wrapper> div，我使用它来包含我的所有内容，不知道为什么但这不允许任何动画 - 将其更改为简单<div>似乎解决了这个问题。

编辑：可能是因为它在每次状态更改时都重新创建了Wrapper组件。