height不确定时,如何使用动画效果展开高度
要点:
当元素 height 不确定时,可以使用 max-height 设置动画效果
a[href="foldBox"] 用于打开 #foldBox(利用伪元素 :target)
a[href="#"] 用于关闭 #foldBox
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<style> body { padding: 10px; } .open { display: inline-block; font-weight: 800; font-size: 18px; text-decoration: none; border: 1px solid ; padding: 10px; margin: 0 0 10px; border-radius: 10px; } .foldBox { overflow: hidden; box-sizing: border-box; width: 100%; max-height: 0; text-align: center; border-radius: 10px; transition: all .3s; } img {width: 30%;} p { font-weight: 800; font-size: 20px; } .foldBox:target { padding: 10% 0; /*该属性只能运用于元素展开后*/ max-height: 800px; border: 1px solid ; } </style> <a class="open" href="#foldBox">What's this?</a> <div id="foldBox" class="foldBox"> <img src="32.jpg"> <p>Are You Happy?</p> <a href="#">YES</a> </div>