下拉动画是一个网页上经常看到的东西，有些这是控制它的出现，没有过渡效果，不是很丝滑，市面上看到的文章也只有改变固定高度的，而如何实现父元素的高度不确定的情况下，由子元素的高度作为整体高度，下面为我的代码，仅供参考。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 100vh;
background-color: #f0f0f0;
}
.container{
width: 200px;
background-color: yellow;
margin: auto;
margin-top: 50px;
}
button{
margin-bottom: 10px;
}
/* button:active + ul{
height: 130px;
} */
ul{
width: 150px;
max-height: 0;
background-color: red;
overflow: hidden;
padding: 0;
transition: .5s;
}
li{
list-style: none;
height: 30px;
line-height: 30px;
color: #fff;
font-size: 18px;
padding: 0;
}
</style>
</head>
<body>
<div class="container">
<button>点击我</button>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<h4>55</h4>
</div>
<script>
var dom=document.querySelector('button');
dom.onclick=function(){
if(document.querySelector('ul').style.maxHeight){
document.querySelector('ul').style.maxHeight=""
}else{
document.querySelector('ul').style.maxHeight="200px"
}
console.log(document.querySelector('ul').style.maxHeight);
}
</script>
</body>
</html>这里通过设置父元素（container）的高度为0，刚开始的最大高度为0，超出部分隐藏，从而隐藏了子元素的，用js控制，如果当前的存在最大高度，那就改变父元素最大高度的值为“”，相反，如果不存在，责可以设置它的max-height为一个合适的值，多大都行，因为max-height只是设置一个最大的边界值，不代表container的高度，而他的高度实际上是多个li元素的高度和，这样就实现了，它的下拉与收起。如有疑问，可以私信我。谢谢！
最终的效果如下：
<iframe allowfullscreen="true" data-mediaembed="csdn" frameborder="0" id="9ENTnuAP-1729229966968" src="https://live.csdn.net/v/embed/429929"></iframe>下拉动画
标签：动画,style,高度,height,ul,html,querySelector,document,css From： https://blog.csdn.net/2302_76980664/article/details/143050783