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. java发送邮件无法显示图片 图裂 的解决办法

    package com.thinkgem.jeesite.common.utils; import org.slf4j.Logger; import org.slf4j.LoggerFactory; ...

  2. array_walk 与 array_map的 区别

    1.array_walk是用于用户自定义的函数,所以想用array_walk($aIds, "trim");去掉数据元素中的空格是达不到目的的只能用array_walk($aIds ...

  3. HOOK IDT频繁蓝屏(Window 正确 HOOK IDT)

    环境 win7x64 Microsoft Windows [版本 6.1.7601]也是一个朋友 HOOK IDT 测试 问我IDT为啥老是蓝屏.结果是因为swapgs问题. 如果你知道swapgs作 ...

  4. css 控制文字超出部分显示省略号

    该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽 ...

  5. vue 拍照上传图片 demo

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. ubuntu安装notepad++

    sudo add-apt-repository ppa:notepadqq-team/notepadqq sudo apt-get update sudo apt-get install notepa ...

  7. 在 C# 中使用文件名启动应用程序

     本文演示了如何启动与某一给定文档扩展名或文件类型关联的应用程序而又无须知道该关联应用程序的名称或位置.例如,您可以用一个与 .bmp 文件扩展名关联的应用程序启动 Arcade.bmp 文件,多 ...

  8. mongoDB数据库插入数据时报错：db.collection is not a function

    nodejs连接mongodb插入数据时,发现mongoDB报错:db.collection is not a function.解决方法: 1.npm下载mongodb2.x.x版本替换3.x.x ...

  9. Linux中找到占用cpu最高的线程

    在工作中,经常会碰到CPU占用100%的情况,那如何找到是那个线程占用了cpu呢? 1. top命令,找到cpu占用最高的进程 2. 查看该进程的线程, top  -p <pid> 3. ...

  10. 17.1-uC/OS-III消息管理（两种消息队列）

    1.使用消息队列 消息队列函数: 函数名 功能 OSQCreate() 创建一个消息队列 OSQDel() 删除一个消息队列 OSQFlush() 清空一个消息队列 OSQPend() 任务等待消息 ...