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基础---->String中replace和replaceAll方法

    这里面我们分析一下replace与replaceAll方法的差异以及原理. replace各个方法的定义 一.replaceFirst方法 public String replaceFirst(Str ...

  2. bootstrap 使用总结

    1.如何设置一行两列? <div class="container"> <div class="row"> <div class= ...

  3. [原][openstack-pike][controller node][issue-4][horizon] dashboard access too low reasons[dashboard 访问太慢]

    本文持续更新... 原因一:  访问dashboard 很慢. 输入了用户名和密码还有project后,一直处于首页状态,等很久才进入(暂且不考虑硬件.硬件暂时假设都满足条件) 首先想到的是memca ...

  4. [Golang] kafka集群搭建和golang版生产者和消费者

    一.kafka集群搭建 至于kafka是什么我都不多做介绍了,网上写的已经非常详尽了. 1. 下载zookeeper  https://zookeeper.apache.org/releases.ht ...

  5. 11.17 luffycity(7)完结

    2018-11-17 15:59:01 路飞项目已经完结!后面已是flask的学习!然后还有十几天的课程等回学校再看 明天归校!!  开始全面整理自己学习的知识,整理博客!还有好多面试题!233333 ...

  6. Centos 为Nginx 搭建https

    Youtube Nginx 扩展模块 certbot文档 yum -y install epel-release yum -y install certbot certbot certonly --s ...

  7. OOD之问题空间到解空间—附FP的建模

    通常会被问到,什么事OOD,然后大部分人期待的答案比较死板,继承.封装.多态!懂这个的人多的去了,有什么好问?回答出来的人是否拿着Java又去做一些面向过程的勾当? 计算机革命起源于机器,因此编程语言 ...

  8. windows系统-phpstudy升级mysql8.0.12安装教程及修改密码和安装注意事项

    1.下载安装包,下载地址:mysql8.0.12  .如果你想要下载其它版本可以选择:mysql历史版本地址. 2.下载好,删除phpstudy的mysql目录.如果数据重要的,注意备份数据!同意把m ...

  9. 网站SEO优化问答精选【转载】

    在接触seo的过程中,大家都会碰到很多这样或那样的问题,特别是一些seo新手由于知识有限会经常到很多地方问一些网站优化的问题,做seo时间慢慢变长之后,知识会慢慢地积累,之前的问题也会慢慢的都被解答. ...

  10. jar命令打jar包

    jar -cvfM0 cloudwarehouse-enter.jar ./BOOT-INF ./META-INF ./org jar -cvfM0 xxl-job-admin.war ./BOOT- ...