1. 前言 

　　在我们不能确定一个元素的高度的时候，要使用transition过渡，是不会触发的，比如一个p标签 内容行数不固定  我们可能就要初始 height: 0 ; 过渡到 height: auto ;  写完发现并不能实现 。

　　

可过渡的样式

　　不是所有的CSS样式值都可以过渡，只有具有中间值的属性才具备过渡效果

　　Vstart = 开始值; Vend = 结束值; Vres = 中间值; p = 过渡函数的输出值

　　Vres = (1 - p) * Vstart + p * Vend

　　当Vres具有有效值时，则该CSS样式可过渡

2. 解决方法（一个实例）
　　通过设置max-height 来实现
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            #div{

                max-height: 0;

                transition: .8s;

                overflow: hidden;

                border: 1px solid #000;

            }

            #btn{

                width: 50px;

                text-align: center;

                margin: 60px;

                line-height: 30px;

                border: 2px solid #000;

                cursor: pointer;

            }

        </style>

    </head>

    <body>

        <div id="btn">

            点击我

        </div>

        <div id="div">

            asd <br/>

            asd <br/>

            asd <br/>

            asd <br/>

            asd <br/>

        </div>

        <script>

            btn.onclick = function(){

                if(div.on){

                    div.style.maxHeight = '0px';

                    div.on = false;

                }else{

                    div.style.maxHeight = '300px';

                    div.on = true;

                }

            }

        </script>

    </body>

</html>
因为max-height是根据内容来撑开高度的，只要max-height  大于正常高度就好了。

高度自适应不能触发transition的解决方法的更多相关文章

  1. css浮动中避免包含元素高度为0的4种解决方法

    问题:当子元素中使用了float时,如果其父元素不指定高度,其高度将为0 解决:清除(闭合)浮动元素,使其父div高度自适应 方法一:额外标签+clear:both     (W3C推荐方法,兼容性较 ...

  2. CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  3. webkit内核下的mouseup后mousemove自动触发问题及解决方法

    如题,就以chrome为代表举例说明遇到mousemove的问题. 为body分别绑定onmousedown.onmousemove.onmouseup,并为触发时打印至控制台.代码如下(同学不要忘记 ...

  4. ViewPager不能高度自适应？height=wrap_content 无效解决办法

    ViewPager用的很多,主要用啦展示广告条.可是高度却不能自适应内容,总是会占满全屏,即使设置android:height="wrap_content"也是没有用的.. 解决办 ...

  5. （总结）Nginx 502 Bad Gateway错误触发条件与解决方法

    一些运行在Nginx上的网站有时候会出现“502 Bad Gateway”错误,有些时候甚至频繁的出现.以下是从Google搜集整理的一些Nginx 502错误的排查方法,供参考: Nginx 502 ...

  6. input的onchange事件实际触发条件与解决方法

    input中onchange事件已经属于元老级别了,并且现在同onclick一样使用频率很高,然而onchange的机制实际上有很多童鞋并不清楚,我们通过实例来分析这个事件的特征. 触发onchang ...

  7. UITableView cell 半透明效果，改变cell高度时背景不闪的解决方法

    如果直接指定cell.backgroundColor = = [UIColor colorWithRed:255.0/255.0 green:255.0/255.0 blue:255.0/255.0 ...

  8. Quartz.NET 前一次任务未执行完成时不触发下次的解决方法

    如图所示,在Job 上 加     [DisallowConcurrentExecution]        特性

  9. CSS兼容IE Firefox问题与解决方法

    一.双边距问题浮动元素的外边距会加倍,但与第一个浮动元素相邻的其他浮动元素外边距不会加倍.解决方法:在此浮动元素增加样式  display:inline; 二.图片产生的间隙父元素直接包含<im ...

随机推荐

  1. axios设置application/x-www-form-urlencoded

    this.$axios({ method: 'post', url: 'http://www.17huo.com/tusou/deeplorSearch.html', headers: { 'Cont ...

  2. linux执行python命令后没有反应，不打印日志信息

    实际的python执行的软连接是路径是/opt/python2.7/bin/python,而设置的软连接错误如下: 修改该连接,是python指向/opt/python2.7/bin/python, ...

  3. Python的安装以及编译器的安装

    首先要想写python语言,要安装并配置python的环境,点击python下载即可,当然需要看下自己电脑适合下载的版本,64位还是32位的即可. 安装一般情况安装在C盘即可,选择添加变量的配置,完成 ...

  4. LeetCode - Subarray sum equals k

    Given an array of integers and an integer k, you need to find the total number of continuous subarra ...

  5. spring mvc接收ajax提交的JSON数据，并反序列化为对象

    需求:spring mvc接收ajax提交的JSON数据,并反序列化为对象,代码如下: 前台JS代码: //属性要与带转化的对象属性对应 var param={name:'语文',price:16}; ...

  6. npm install 错误 安装 chromedriver 失败的解决办法

    npm 安装 chromedriver 失败的解决办法npm 安装 chromedriver 时,偶尔会出错,错误提示类似于:npm ERR! chromedriver@2.35.0 install: ...

  7. JDK 5.0 注解知识快速进阶

    1.了解注解 对于Java开发人员来说,在编写代码时,除了源程序外,还会使用Javadoc标签对类.方法或成员变量进行注释,一遍使用Javadoc工具生成和源代码配套的Javadoc文件,如@para ...

  8. 【CF434D】Nanami's Power Plant 最小割

    [CF434D]Nanami's Power Plant 题意:有n个二次函数$y=a_ix^2+b_ix+c_i$($a_i,b_i,c_i$是整数),第i个函数要求x的取值在$[l_i,r_i]$ ...

  9. 如何查找Power BI本地报表服务器产品密钥

     Power BI 报表服务器产品密钥,以便在生产环境中安装服务器. 已下载 Power BI 报表服务器,并已购买 SQL Server Enterprise 软件保障协议. 或者,已购买 Powe ...

  10. loadrunner笔记（二）：飞机订票系统--客户信息注册

    (一)  几个重要概念说明 集合点:同步虚拟用户,以便同一时间执行任务. 事务:事务是指服务器响应用户请求所用的时间,当然它可以衡量某个操作,如登录所需要的时间,也可以衡量一系列的操作所用的时间,如从 ...