http://dobinspark.com.cn/

前言:

  在说到实现元素的展开收缩,通常的想法是通过控制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也是无法计算的。

  上实例:

      /*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世界》一书中的介绍,其中可能存在疑点或者错误,如果有错误的地方,欢迎各位大牛指正!献上花花。。。(*^__^*) 嘻嘻……

max-height实现任意高度元素的展开收缩动画的更多相关文章

  1. 右上角鼠标滑过展开收缩动画效果js代码的演示页面

    http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...

  2. vuejs实现折叠面板展开收缩动画

    vuejs通过css3实现元素固定高度到auto高度的动画和auto高度到固定高度的动画. 循环列表,html: <template> <div class="newsli ...

  3. Codeforces Round #283 (Div. 2) A. Minimum Difficulty【一个数组定义困难值是两个相邻元素之间差的最大值。 给一个数组,可以去掉任意一个元素,问剩余数列的困难值的最小值是多少】

    A. Minimum Difficulty time limit per test 2 seconds memory limit per test 256 megabytes input standa ...

  4. 求最长的任意两元素差不超过M的子段——双指针+单调队列hdu4123

    换根dp的部分比较容易,难点在于求求最长的任意两元素差不超过M的子段 首先会想到双指针维护(尺取法),如果p1,p2间的max-min>M,那么p1向右移动,直到p1,p2间的max-min&g ...

  5. 获取页面中任意一个元素距离body的偏移量

    //offSet:等同于jQuery中的offSet方法,获取页面中任意一个元素距离body的偏移量function offSet(curEle) { var totalLeft = null; va ...

  6. How to limit Dialog's max height?

    1. We can make it to play trick in code. At Dialog's show function, after app has set contentView, w ...

  7. js 获取任意一个元素的任意一个样式属性的值

    //谷歌,火狐支持console.log(window.getComputedStyle(my$("dv"),null).left);//IE8支持console.log(my$( ...

  8. [Algorithm] Find Max Items and Max Height of a Completely Balanced Binary Tree

    A balanced binary tree is something that is used very commonly in analysis of computer science algor ...

  9. flutter showModalBottomSheet max height

    static void showBuyServiceDialog(BuildContext context) { showModalBottomSheet( context: context, isS ...

随机推荐

  1. 微信小程序开发2-第一个小程序开发准备

    1.首先在官网上注册一个账号( https://mp.weixin.qq.com/ )申请一个AppID(类似于人的身份证,小程序也需要身份证) 注册过程不多说 2.安装开发工具( https://m ...

  2. 在Ubuntu14.10中部署Hadoop2.6.0单节点伪分布集群

    1. 环境信息如下: ubuntu:14.10 jdk:openjdk-1.7.0 hadoop:2.6.0 2. 下载hadoop2.6.0, http://apache.fayea.com/had ...

  3. Linux Firefox Adobe Flash Player 安装和更新

    1.下载 Firefox Adobe Flash Player 使用Linux上的火狐浏览器访问如下的下载网址: https://get.adobe.com/flashplayer/ 选择下载 &qu ...

  4. 面试题Spring Boot

    Spring Boot 是微服务中最好的 Java 框架. 我们建议你能够成为一名 Spring Boot 的专家. 问题一 Spring Boot.Spring MVC 和 Spring 有什么区别 ...

  5. java面试题之----jdbc中使用的设计模式(桥接模式)

    1.JDBC(JavaDatabase Connectivity) JDBC是以统一方式访问数据库的API. 它提供了独立于平台的数据库访问,也就是说,有了JDBC API,我们就不必为访问Oracl ...

  6. java中复制数组的5种方法

    “=”,相当于将一个数组变量的引用传递给另一个数组;如果一个数组发生改变,那么引用同一数组的变量也要发生改变.,这一种勉强算是吧 使用FOR循环,将数组的每个元素复制或者复制指定元素,不过效率差一点 ...

  7. 红黑树(R-B Tree)

    R-B Tree简介 R-B Tree,全称是Red-Black Tree,又称为“红黑树”,它一种特殊的二叉查找树.红黑树的每个节点上都有存储位表示节点的颜色,可以是红(Red)或黑(Black). ...

  8. 求n的元素的最大最小值

    public static int[] maxMin(int a[]) { int[] res = new int[2]; int len = a.length; if (len <= 0) { ...

  9. JAVA环境变量安装

    需配置的系统环境变量参数: JAVA_HOME:C:\Program Files\Java\jdk1.8.0_60 CLASS_PATH: ;%JAVA_HOME%\lib;%JAVA_HOME%\l ...

  10. zookeeper 的监控工具

    zookeeper 的监控工具         公司很多产品会使用zookeeper,比如Meta消息中间件,在测试的过程中,我们经常需要查询zookeeper里面的信息来精确定位问题.目前项目中有开 ...