沒有使用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組件。