本文探讨了在CSS中使用max-height属性结合动画实现元素展开与收起效果的方法，特别关注max-height值的选择对动画流畅性和用户体验的影响。
<style>
.a{
max-height:0;
background:red;
overflow: hidden;
transition: all linear 5s;
}
.b{
height:200px;
background:blue;
}
</style>
</head>
<body>
<button>点我试试</button>
<div class="a">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero tempore laboriosam natus quae fuga nesciunt itaque fugit voluptas ratione eos beatae ea repellendus modi autem accusamus molestiae, corrupti saepe numquam.</div>
<div class="b">222</div>
</body>
<script>
document.getElementsByTagName("button")[0].onclick=function(e){
document.getElementsByClassName("a")[0].style.maxHeight=`1000px`; //给个最大高度就会出现动画
}
</script>
最大高度动画
最新推荐文章于 2022-04-11 10:32:08 发布
扫一扫
2475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
