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. vue 使用font-awesome

    1.npm 安装font-awesome 以及需要的所有依赖 npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawes ...

  2. iOS - 解决 Cocoapods 第三方库下载不下来

    Cocoapods 第三方库下载不下来问题:一些第三方的库由于网的原因下载不下里 (解决思路:(原理) cocoapods 下载的时候 会先从缓存中拿 缓存中没有再去下载 所以可以把下载不下来的放到缓 ...

  3. LeetCode - 767. Reorganize String

    Given a string S, check if the letters can be rearranged so that two characters that are adjacent to ...

  4. Java-IO基础类回忆

    好记性不如烂笔头,就拿Java IO来说吧,这部分的基础类我大学都已经学过一遍了,但是现在忘记的差不多了,所以准备写一篇博客,讲这些东西都回忆一下,并且整理一下. 首先借用网上的一张图: 纵向分为字节 ...

  5. MySql.Data.dll官网下载

    Mysql.Data.dll官网下载 在项目开发中链接MySQL数据库经常要用到Mysql.Data.dll,网上虽然有很多,但是还是比较信赖官网的 今天就从官网下载一次记录一下过程 1.下载地址 官 ...

  6. vue filter方法-时间格式化

    plugins/filter.js import Vue from 'vue' // 时间格式化 // 用法:<div>{{data | dataFormat('yyyy-MM-dd hh ...

  7. Oracle同义词（synonym）

    oracle的同义词总结   从字面上理解就是别名的意思,和视图的功能类似.就是一种映射关系.   同义词拥有如下好处:   节省大量的数据库空间,对不同用户的操作同一张表没有多少差别;   扩展的数 ...

  8. Educational Codeforces Round 2

    600A - Extract Numbers    20171106 字符串处理题,稍微注意点细节就能水过 #include<stdlib.h> #include<stdio.h&g ...

  9. Lucene入门学习

    技术原理: 开发环境: lucene包:分词包,核心包,高亮显示(highlight和memory),查询包.(下载请到官网去查看,如若下载其他版本,请看我的上篇文档,在luke里面) 原文文档: 入 ...

  10. java Api 读取HDFS文件内容

    package dao; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs.*; import java ...