css3实现一个宽高未知的div的slidedown动画

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;