css3實現一個寬高未知的div的slidedown動畫

需求

slidedown和slideup動畫被廣泛應用於導航欄的下拉選單中，過去利用DOM操作配合setInterval或setTimeOut，可以製造出非常方便的slidedown過渡動畫。使用js和dom操作時，我們著重強調的寬高未知便不是什麼大問題，因為使用js獲取一個元素的高度實在是再簡單不過的事情了。
但隨著vue和react的普及,低效且繁瑣的DOM操作已經逐漸退出舞臺。而強大的CSS3又提供了非常完整的動畫功能，因此對於slidedown這類簡單的動畫效果，使用css便足以實現。

屬性和知識點

max-length
transition

都是很簡單的東西，知道該利用什麼方式實現，便完成了工作的一半。

程式碼

header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 250px;
}

.div {
    background-color: aqua;
    transition: all 3.3s;
    max-height: 0px;
    overflow: hidden;
}

.show {
    max-height: 300px;
}

import React from 'react';
import './App.css';
import { RefObject } from "react"

interface IState {
  groupEl: any,
  myRef: RefObject<HTMLUListElement>,
  styleObj: {

  },
  classList : string
}

interface IProps {

}

class App extends React.Component<IProps, IState>{

  constructor(props: IProps) {
    super(props);
    const Ref = React.createRef<HTMLUListElement>();

    this.state = {
      groupEl: "",
      myRef: Ref,
      styleObj: {

      },
      classList : "div"
    }
  }

  handleClick = () => {
    const count = Math.random() * 10 + 1;
    let listItem: any[] = [];
    for (let i = 0; i < count; i++) {
      listItem.push(<li key={i} onClick = {this.onAlert(1)}>d</li>)
    }
    this.setState({ groupEl: listItem ,classList : "div show"});
  }

  onAlert:(i:number) => void = (i:number) => {

  }

  render() {
    const { groupEl, myRef,classList} = this.state;
   
    return (
      <div className="App">
        <header className="App-header">
          <section>
            <div className={classList}>
              <ul ref={myRef}>
                {groupEl}
              </ul>
            </div>
            <button onClick={this.handleClick}>獲取li標籤</button>
          </section>
        </header>
      </div>
    );

  }
}

export default App;