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. puppet(3) 变量、数据类型、表达式、条件判断语句-if、case、selector、unless

    puppet(4) 变量.数据类型.表达式.条件判断语句-if.case.selector语句 puppet变量: 1.名称必须以$开头:赋值使用=,支持追加赋值+=: 2.每个变量都有两种引用格式: ...

  2. Redis介绍和安装

    一. Redis的介绍 Redis 是一个Key-Value存储的系统:它支持存储的value类型有string(字符串),list(列表),set(集合),zset(有序集合):为了保证效率:数据都 ...

  3. jstat命令详解

    Jstat是JDK自带的一个轻量级小工具.全称“Java Virtual Machine statistics monitoring tool”,它位于java的bin目录下,主要利用JVM内建的指令 ...

  4. python 链表表达式 map、filter易读版

    链表推导式 [x for x in x] 链表推导式提供了一个创建链表的简单途径,无需使用 map(), filter() 以及 lambda.返回链表的定义通常要比创建这些链表更清晰.每一个链表推导 ...

  5. oracle的高级查询

    1.简单连接 基本连接语法:SELECT [ALL|DISTINCT]column_name[,expression…]FROM table1_name[,table2_name,view_name, ...

  6. 分布式事务TransactionScope

    分布式事务TransactionScope 以下是分布式事务的所有情况的例子了,包含了事务套事务,事务套存储过程事务,经过测试,TransactionScope对于分布式事务的各种情况支持的很好. 使 ...

  7. 用ps怎么修改照片的背景颜色？？【申明：来源于网络】

    用ps怎么修改照片的背景颜色??[申明:来源于网络] 地址:http://wenda.so.com/q/1361505315060523?src=140

  8. particles.js中文开发手册

    2017年6月17日01:06:28 因为自己需要做产品,所以一个好的UI界面也是很重要的,发现这种散射的原子颗粒特效还不错,就弄了一个 官方github:https://github.com/Vin ...

  9. CH 2401 - 送礼 - [折半DFS+二分]

    题目链接:传送门 描述 作为惩罚,GY被遣送去帮助某神牛给女生送礼物(GY:貌似是个好差事)但是在GY看到礼物之后,他就不这么认为了.某神牛有N个礼物,且异常沉重,但是GY的力气也异常的大(-_-b) ...

  10. idea便利配置使用配置

    让properties能够中文正确显示 1.file encoding ---改为utf-8 spring的autowried没得错误,mybaties没得黄色背景 inspections--spri ...