写一个长度不固定的折叠收起动画基本的思路如下：使用一个div包裹内容，并且把内部的高度设置为0，通过js给获得warp-

基本的思路如下：使用一个div包裹内容，并且把内部的高度设置为0，通过js给获得warp-container的高度并且动态赋值给内部的content即可。代码如下：

html:

<button onClick={tiger}>click</button>
<div id="warp-container">
  <div id='content'></div>
</div>

css:

.content {
  height: 0px;
  overflow: hidden;
  transition: linear .5s;
  background-color: red;
}

js:

const tiger = () => {
    let warp = document.querySelector('#warp-container')
    let content = document.querySelector('#content')
    if (content.clientHeight) {
        content.setAttribute('style',`height:0px`)
    } else {
        content.setAttribute('style',`height:${warp.clientHeight}px`)
    }
}