CSS实现展开动画
CSS实现展开动画
展开收起效果是比较常见的一种交互方式，通常的做法是控制display属性值在none和其它值之间切换，虽说功能可以实现，但是效果略显生硬，所以会有这样的需求——希望元素展开收起能具有平滑的效果。
实现#
max-height#
首先想到的是通过height在0与auto之间切换，但是结果可能并不会是我们所预期的那样，原因是我们将要展开的元素内容是动态的，即高度值不确定，因此height使用的值是默认的auto，从0px到auto是无法计算的，因此无法形成过渡或动画效果。
据此我们可以使用max-height，将max-height从0过渡到一个能够大于完全显示内部元素的值，展开后的max-height值，只需要设定为保证比展开内容高度大的值即可，在max-height值比height值大的情况下，元素仍会默认采用自身的高度值即auto，如此一来一个高度不定的元素展开收起动画效果就实现了。
请注意这种方式实现还是有限制的，使用CSS进行过渡动画的时候依旧是通过计算0到设定的max-height高度值进行计算的，在实际应用中如果max-height值太大，在元素收起的时候将会产生延迟的效果，这是因为在收起时，max-height从设定的特别大的值，到元素自身高度值的变化过程将占用较多时间，此时画面表现则会产生延迟的效果。因此建议将max-height值设置为足够安全的最小值，这样在收起时即使有略微延迟，也会因为时间很短，难以被用户感知，将不会影响体验。
<!DOCTYPE html>
<html>
<head>
<title>展开动画</title>
<style type="text/css">
.page{
width: 200px;
padding: 10px 20px;
border: 1px solid #eee;
}
.container {
overflow: hidden;
}
.container > .options{
transition: all .5s;
max-height: 0;
}
.container > .unfold{
max-height: 150px;
}
.container > .btn{
color: #4C98F7;
cursor: pointer;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="page">
<div class="container">
<div class="btn" onclick="operate(this)" unfold="1">展开</div>
<div class="options">
<div class="option">选项1</div>
<div class="option">选项2</div>
<div class="option">选项3</div>
<div class="option">选项4</div>
<div class="option">选项5</div>
<div class="option">选项6</div>
<div class="option">选项7</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function operate(btn){
const optionsNode = document.querySelector(".container > .options");
const unfold = btn.getAttribute("unfold");
if(unfold && unfold==="1"){
btn.innerText = "收缩";
optionsNode.classList.add("unfold");
}else{
btn.innerText = "展开";
optionsNode.classList.remove("unfold");
}
btn.setAttribute("unfold", unfold === "0" ? "1" : "0");
}
</script>
</html>
height#
使用max-height必定有一定的局限性，那么不如我们在DOM加载完成后就取得元素的实际高度并保存，之后直接利用这个真实高度与0进行动画过渡即可，因为浏览器的渲染顺序，在解析JavaScript时会阻塞DOM的渲染，所以在获取元素实际高度再设置高度为0的过程中一般不会出现闪烁的情况，如果实在担心因为获取高度之后再将高度设置为0可能会有一个闪烁的过程，那么我们可以取得元素父节点后调用cloneNode(true)方法或者innerHTML方法取得字符串再innerHTML到一个新创建的节点，目的就是将其拷贝，之后将其使用绝对定位等放置到屏幕外即将其设置到屏幕能够显示的外部区域，注意此时要设置body的overflow: hidden;，之后利用getComputedStyle取得实际高度，然后再将其移出DOM结构，此时有了实际高度就可以进行动画过渡了，下面简单的实现一下在DOM加载时便取得实际高度进行动画实现。
<!DOCTYPE html>
<html>
<head>
<title>展开动画</title>
<style type="text/css">
.page{
width: 200px;
padding: 10px 20px;
border: 1px solid #eee;
}
.container {
overflow: hidden;
}
.container > .options{
transition: all .5s;
}
.container > .btn{
color: #4C98F7;
cursor: pointer;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="page">
<div class="container">
<div class="btn" onclick="operate(this)" unfold="1">展开</div>
<div class="options">
<div class="option">选项1</div>
<div class="option">选项2</div>
<div class="option">选项3</div>
<div class="option">选项4</div>
<div class="option">选项5</div>
<div class="option">选项6</div>
<div class="option">选项7</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
(function init(win, doc){
const optionsNode = document.querySelector(".container > .options");
optionsNode.setAttribute("real-height", win.getComputedStyle(optionsNode).height);
optionsNode.style.height = "0px";
})(window, document);
function operate(btn){
const optionsNode = document.querySelector(".container > .options");
const unfold = btn.getAttribute("unfold");
const realHeight = optionsNode.getAttribute("real-height");
if(unfold && unfold==="1"){
btn.innerText = "收缩";
optionsNode.style.height = realHeight;
}else{
btn.innerText = "展开";
optionsNode.style.height = "0px";
}
btn.setAttribute("unfold", unfold === "0" ? "1" : "0");
}
</script>
</html>
translateY#
还有一种常用实现动画的方式，即首先将外层元素没有动画过渡的形式直接展开，再将选项加入动画缓慢下落，通常利用transform: translateY();去实现这个缓慢下降的动画，在微信的WEUI小程序组件库的首页就是采用这种实现方式。
<!DOCTYPE html>
<html>
<head>
<title>展开动画</title>
<style type="text/css">
.page{
width: 200px;
padding: 10px 20px;
border: 1px solid #eee;
}
.container, .options-container {
overflow: hidden;
}
.options-container{
height: 0;
}
.container .options{
transition: all .5s;
transform: translateY(-100%);
}
.container .unfold{
transform: translateY(0);
}
.container > .btn{
color: #4C98F7;
cursor: pointer;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="page">
<div class="container">
<div class="btn" onclick="operate(this)" unfold="1">展开</div>
<div class="options-container">
<div class="options">
<div class="option">选项1</div>
<div class="option">选项2</div>
<div class="option">选项3</div>
<div class="option">选项4</div>
<div class="option">选项5</div>
<div class="option">选项6</div>
<div class="option">选项7</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function operate(btn){
const optionsNode = document.querySelector(".container .options");
const optionsContainer = document.querySelector(".options-container");
const unfold = btn.getAttribute("unfold");
if(unfold && unfold==="1"){
btn.innerText = "收缩";
optionsNode.classList.add("unfold");
optionsContainer.style.height = "auto";
}else{
btn.innerText = "展开";
optionsNode.classList.remove("unfold");
optionsContainer.style.height = "0px";
}
btn.setAttribute("unfold", unfold === "0" ? "1" : "0");
}
</script>
</html>
每日一题#
https://github.com/WindrunnerMax/EveryDay
参考#
http://www.111com.net/wy/192615.htm
https://zhuanlan.zhihu.com/p/52582555
https://cloud.tencent.com/developer/article/1499033
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理