基于max-height实现不定高度元素的折叠/合并,展开/收缩的动画效果

时间: 2018-05-28阅读: 3461标签: 宽高

基于实现元素的展开收缩,通常的想法是通过控制display的元素属性和none之间的切换,虽然说功能可以实现,但是这种展开是没有任何动画的效果,只是单纯的显示与隐藏。例外一种方法就是通过JQuery的slideUp()、slideDown()方法,这是jQuery带有的功能属性,大家都应该很清楚,在有些情况下JavaScript框架都是没有动画模块的,比如移动端,所以使用css实现动画效果就成了最好的选择。


下面我们将说一说max-height的二三事! 


1.先上css参考手册关于max-height的说明 :



2.使用CSS实现展开收缩的效果第一想法就是通过height+overflow:hidden实现,使用过这种方式的一般都知道在实现的过程都是将height的高度固定写死,高度auto的话是无法形成过渡的动画效果,auto是一个关键字值,并非数值,因此,height:100%的100%和auto两者,height从0px到auto也是无法计算的。


3.实例

<style type="text/css">
.el{
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s;
    -webkit-transform: max-height 1s;
    background-color: #666;
}
:checked ~.el{
    max-height:800px; /*足够内容的高度*/
}
#check ~label:before{
	content:"展开";
	display: inline-block;
}
:checked ~label:before{
	content:"收缩" !important;
}
</style>

html:

<input id="check" type="checkbox"><label for="check"></label>
<div class="el">
     <div class="box" style="width: 100%;">
     	这<br/><br/>是<br/><br/>内<br/><br/>容<br/><br/>哦<br/><br/>
     </div>
</div>

这样写的max-height,给定足够大的高度,就是言义上的任意高度,相对height来说比较灵活,两者的区别就是计算高度的过程,一个是由人为计算,一个由盒子内容高度去计算知识这种写法必须给定足够存放内容的高,写的时候尽量写大一点。 


来源 :https://www.cnblogs.com/Dobin/archive/2018/05/28/9091821.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/832

JavaScript如何获取网页的宽高,以及如何兼容(各种坑详解)

很多场景下会需要获取当前网页的宽高来达到一些效果,但是获取网页的宽高这里面还是有一点坑的,这里我进行了总结和详解

使用js如何设置、获取盒模型的宽和高

使用内联样式的元素的宽和高。浏览器渲染以后的元素的宽和高,无论是用何种方式引入的css样式都可以,但只有IE浏览器支持这种写法。计算一个元素的绝对位置(相对于视窗左上角)

js获取浏览器/界面宽高的问题_以及兼容性实现方案

js获取浏览器/界面宽高的问题:clientHeight和clientWidth获取可视区域大小,scrollHeight和scrollWidth获取网页内容高度和宽度。offsetHeight和offsetWidth,获取网页内容高度和宽度(可视区域包括滚动条等边线,会随窗口的显示大小改变)

css实现左边定宽右边自适应的5种方法总汇

在网页布局中,通常需要实现左边定宽右边自适应布局:实现方法有:浮动布局、flex布局、使用负margin、绝对定位、table布局

css中input与button在一行高度不一致的解决方法

在写html表单的时候,发现了一个问题:input和button设置了一样的宽高,但是显示高度确不一致,很明显的看出高度不一样。这是由于button在高度计算上始终使用了Quirks模式。

js动态获取浏览器或页面等容器的宽高

首先说一下js动态获取浏览器或页面等容器的宽高的方法大体有哪些,有时候我们写了100%高度的时候,然后因为是当前页面的子页面,100%的只是父页面,而子页面有下拉条还有内容的话,一些东西就不能都获取到。

css中width为auto或者100%的区别

css中width为auto或者100%的区别四个理论:某div不显示设置宽度那么width为auto;某div的width在默认情况设置的是盒子模型中content的值;某div的width为100%表示的是此div盒子内容部分的宽度为其父元素的宽度

JS中的offset

一、offsetWidth与offsetHeight:获取的是元素的实际宽高 = width + border + padding ,二:offsetLeft与offsetTop;offsetLeft:获取自己左外边框与父级元素的左内边框的距离 ,offsetTop:获取自己上外边框与父级元素的上内边框的距离

js获取屏幕以及元素宽高的方法

网页正文部分上:window.screenTop ,网页正文部分左:window.screenLeft,屏幕分辨率的高:window.screen.height ,屏幕分辨率的宽:window.screen.width ,屏幕可用工作区高度:window.screen.availHeight

网页中的各种上下左右宽高值

offset只读属性。width/height——显示出来的屏幕尺寸,top/left——相对于定位父元素的绝对位置.client只读属性。width/height——不带边框的offset,也不包含滚动条宽度top/left——内边距的外边缘与边框外边缘的距离,通常是边框宽度

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!