我正在嘗試使用 CSSTransitionGroup （或 ReactTransitionGroup）為內容在 dom 中出現和消失時創建垂直平滑滾動效果。我知道在純 css 中使用過渡來動畫化這種效果的方法，但是當一個項目出現在 DOM 中然后離開 DOM 時，我需要能夠在 React 中執行此操作，因此 CSSTransitionGroup 似乎是正確的解決方案。雖然我能夠對顏色和不透明度等屬性進行動畫處理，但我未能成功對高度和/或最大高度等屬性進行動畫處理以實現內容從上到下或從下到上逐漸消失。當項目進入和離開 DOM 時，如何制作像這樣的平滑滾動效果的動畫？我當前使用 CSSTransitionGroup 的代碼如下：class App extends React.Component {  state = {    random: true  };  toggleItem = () => {    this.setState({      random: !this.state.random    });  };  render() {    console.log("random", this.state.random);    return (      <div>        <button onClick={this.toggleItem}>toggle item</button>        <br />        <CSSTransition          in={this.state.random}          timeout={400}          classNames="alert"          unmountOnExit          appear          enter={false}        >          <div class="back">            Hello adsffd asdfadfs asdfasd asdfasdf asdfasfa fdasfas asdfasdf            afdsafas asdfasd asdfasdf asdfadsf asdfads asdfads asdfasdf            asdfadsadsf world Hello adsffd asdfadfs asdfasd asdfasdf asdfasfa            fdasfas asdfasdf afdsafas asdfasd asdfasdf asdfadsf asdfads asdfads            asdfasdf asdfadsadsf world Hello adsffd asdfadfs asdfasd asdfasdf            asdfasfa fdasfas asdfasdf afdsafas asdfasd asdfasdf asdfadsf asdfads            asdfads asdfasdf asdfadsadsf world Hello adsffd asdfadfs asdfasd            asdfasdf asdfasfa fdasfas asdfasdf afdsafas asdfasd asdfasdf          </div>        </CSSTransition>      </div>    );  }}export default App;我當前的輸入狀態類別是：.alert-enter {  height: 0px;  visibility: hidden;  overflow: hidden;}.alert-enter-active {  height: auto;  overflow: auto;  visibility: visible;  transition: all 300ms;}