max-height实现任意高度元素的展开收缩动画

xuxueli 发布于2019-04-23 13:41 / 1326人阅读

摘要：前言在说到实现元素的展开收缩，通常的想法是通过控制的元素属性和之间的切换，虽然说功能可以实现，但是这种展开是没有任何动画的效果，只是单纯的显示与隐藏。

http://dobinspark.com.cn/

前言：

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

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

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

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

　　上实例：

      /*css*/  
.element{
            height: 0;
            overflow: hidden;
            transition: height .25s;
            background-color: pink;
        }
        :checked ~ .element{
            height: 100%; /*高度100%和auto都是生硬的效果，给定具体值可以实现动画*/
        }

/* html*/
<input id="check" type="checkbox">
<div class="element">
     <div class="box" style="width: 100%;height: 800px">div>
div>
<label for="check" >收缩label>

　　max-height的方法实现过程：

/*css*/
        .element{
            max-height: 0;
            overflow: hidden;
            transition: max-height .25s;
            background-color: pink;
        }
        :checked ~ .element{
            max-height: 2000px; /*足够存放内容的高度*/
        }
/*html*/
<input id="check" type="checkbox">
<div class="element">
     <div class="box" style="width: 100%;height: 800px">div>
div>
<label for="check" >收缩label>

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

后记：当初看了张鑫旭的CSS世界，对max-height有过一点印象，最近接触使用到height展开收缩动画这一点，所以写编文章记录学习一下，关于这一点详细的具体介绍可以参考《CSS世界》一书中的介绍，其中可能存在疑点或者错误，如果有错误的地方，欢迎各位大牛指正！献上花花。。。(*^__^*) 嘻嘻……

专线服务 idc机房托管 jQuery收缩展开表视图展开收缩 JS点击展开收缩 js慢慢展开收缩效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2215.html

《CSS世界》阅读笔记（二）——块级元素与基本尺寸

摘要：块级元素基本概念块级元素是一个水平流上只能单独显示一个元素，多个块级元素则换行显示。其中内部尺寸由内部元素决定还有一类叫作外部尺寸宽度由外部元素决定。所以子元素的高度设为是无效的。此时的就会有计算值，即使祖先元素的计算为也是如此。块级元素基本概念块级元素：是一个水平流上只能单独显示一个元素，多个块级元素则换行显示。块级元素和display 为 block 的元素不是一个概念。每...

lylwyy2016 2019-08-29 18:31 评论0 收藏0
仿支付宝首页头部伸缩效果

摘要：原文链接每次打开支付宝首页滑动，头部的伸缩动画甚是吸引人。当一个滚动事件结束，如果视图是部分可见的，那么它将被滚动到收缩或展开。种折叠模式默认属性，布局将正常显示，无折叠行为。原文链接：https://mp.weixin.qq.com/s/GegMt7GDBCFVoUgFQWG3Sw 每次打开支付宝首页滑动，头部的伸缩动画甚是吸引人。于是自己决定动手来实现一个。无图言虚空...

BearyChat 2019-06-25 12:15 评论0 收藏0
jQuery操作之效果

摘要：，用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的事件。用选择器选中第二个，给它绑定事件，现在是显示的，它会在一秒钟之内慢慢的隐藏，实现淡出效果。，通过不透明度的变化来实现所有匹配元素的淡出效果。效果如下，，关闭页面上所有的动画。 jQuery操作之效果效果操作一共分五类：1.基本，2.滑动，3.淡入淡出，4.自定义，5.设置showImg(https://segmentfa...

seal_de 2019-08-21 11:47 评论0 收藏0
《css世界》- 详细重点笔记与技巧

摘要：概述在世界这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获以下是摘自每章内一些重要的概念与技巧。概述在《css世界》这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获！！！以下是摘自每章内一些重要的概念与技巧。其中有解决图片间隙的问题、小图标与文字居中问题等; ps: 特别是 line-h...

MasonEast 2019-08-02 12:03 评论0 收藏0
《css世界》- 详细重点笔记与技巧

摘要：概述在世界这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获以下是摘自每章内一些重要的概念与技巧。概述在《css世界》这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获！！！以下是摘自每章内一些重要的概念与技巧。其中有解决图片间隙的问题、小图标与文字居中问题等; ps: 特别是 line-h...

赵连江 2019-08-29 17:20 评论0 收藏0