javascript - 如何使用 javascript 来减慢 div 转换？

Question

html

 <li onClick="changeHeight();" >Project Info</li>

 <div id="content-about-project" style="width: 100%; border:1px solid gray;">
content
  </div>

Js

function changeHeight() {
document.getElementById('content-about-project').style.height = "600px"
}

到目前为止代码做了什么......

用户点击链接(a)，js函数被调用，此时div的高度扩展了600px；

我的问题

当 div 扩展其高度时，我如何减慢它的速度。 现在它的速度非常快，我不是很喜欢。

Answer 1

试试classList.toggle()功能。在 dom 中直接更改 css 属性会更好。并使用 transition减速效果

function changeHeight() {
document.getElementById('content-about-project').classList.toggle('expand')
}

.normal{

transition:all 0.5s ease-in;
height:15px;
}
.expand{
height:600px;
}

 <li onClick="changeHeight();" >Project Info</li>

 <div id="content-about-project"  class="normal" style="width: 100%; border:1px solid gray;">
content
  </div>