max-height实现任意高度元素的动画

2019-06-09164次阅读css

通过设置display属性none、block显示与隐藏,是没有任何动画效果的。还有就是能过height:0+overflow:hidden到height实现固定高度动画。实现任意高度元素的动画不妨试试max-height

<style>
.element{
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s;
}
:checked ~ .element{
    max-height: 2000px; /*足够存放内容的高度*/
}
<style>
<input type="checkbox">
<div class="element"></div>

 

上一篇: gulp-filter过滤、恢复过滤等文件操作  下一篇: 常见的JavaScript内存泄漏有哪些  

max-height实现任意高度元素的动画相关文章