如何设置动画，使div出现和消失时向下扩展和向上收缩？我想也许css3动画，但当我添加过渡动画到我的CSS它没有做任何事情.
function SearchToggle(){
var off=document.getElementById('SearchContainer');
if (off.style.display == "none") {
off.style.display = "block";
} else {
off.style.display = "none";
}
}#SearchContainer {
border: none;
outline: none;
display: block;
background-color: silver;
color: #FFF;
margin: 0 0 0 0;
float: left;
width: 400px;
min-width: 400px;
max-width: 400px;
height: 40px;
min-height: 40px;
max-height: 40px;
} <menu name="WindowMenu" id="WindowMenu" class="WindowMenu">
<span name="WindowIcon-Span" id="WindowIcon-Span" class="WindowIcon-Span">
<img src="ROOT.ASSETS/IMAGES/ICONS/ICON GROUP 1/FAVICON1.64.png" name="WindowIcon-PNG" id="WindowIcon-PNG" class="WindowIcon-PNG" />
</span>
<span name="WindowTitle" id="WindowTitle" class="WindowTitle"> PROTON CORE </span>
<div name="WindowControl-Wrapper" id="WindowControl-Wrapper" class="WindowControlWrapper">
<i name="SearchIcon" id="SearchIcon" class="fa-solid fa-magnifying-glass" onclick="SearchToggle()"></i>
<input type="button" value="" name="WindowControl-1" id="WindowControl-1" class="WindowControl-1" onclick="window.close(true)" />
<input type="button" value="" name="WindowControl-2" id="WindowControl-2" class="WindowControl-2" />
</div>
</menu>
<form name="SearchContainer" id="SearchContainer" class="SearchContainer">
</form>我试着用CSS制作高度转换的动画，但在将其更改为高度后就停止了.
function SearchToggle(){
var off=document.getElementById('SearchContainer');
if (off.style.height == "0px") {
off.style.height = "40px";
} else {
off.style.display = "0px";
}
}
#SearchContainer {
border: none;
outline: none;
background-color: silver;
color: #FFF;
margin: 0 0 0 0;
float: left;
width: 400px;
min-width: 400px;
max-width: 400px;
height: 0px;
//min-height: 40px;
//max-height: 40px;
transition: height 2s;
}