但一个元素不设置height时，它的默认值是 auto，浏览器会计算出实际的高度。

但如果想给一个 height:auto 的块级元素的高度添加 CSS3 动画时，该怎么办呢？

从 MDN 的可以查到 CSS 支持动画的属性中的 height 属性如下：

height ：yes, as a length, percentage or calc(); // 当 height 的值是 length，百分比或 calc() 时支持 CSS3 过渡。

所以当元素 height : auto 时，是不支持 CSS3 动画的。

除了通过 JS 获取精确的 height 值的方法外，其实我们可以使用 max-height 代替 height。

只要我们设置一个肯定比元素自增长大的高度值就可以了。当然，因为是根据 max-height 值进行过渡效果，所以最好不要大得离谱，否则动画效果不理想。

 <!DOCTYPE html>

 <html lang="en">

     <head>

         <meta charset="utf-8">

         <style>

             *{

                 margin: 0;

                 padding:0;

             }

             div{

                 display: inline-block;

                 overflow: hidden;

                 background-color: orange;

                 max-height: 20px;

                 -webkit-transition: max-height 1s;

                 transition: max-height 1s;

             }

             div:hover{

                 max-height:200px;

             }

         </style>

     </head>

     <body>

         <div>

             <p>我不是height，是max-height</p>

             <p>我不是height，是max-height</p>

             <p>我不是height，是max-height</p>

             <p>我不是height，是max-height</p>

             <p>我不是height，是max-height</p>

             <p>我不是height，是max-height</p>

         </div>

     </body>

 </html>

参考资源：http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto

这是我第一篇博客文章，希望能让大家学到东西。当然，我更希望收到大家对我的建议！

如何为不定高度(height:auto)的元素添加CSS3 transition-property:height 动画的更多相关文章

  1. 父元素高度为auto,子元素使用top:-50%没有效果的问题

    无意间在实现元素垂直居中的一种方式测试到,当一个元素高度没有指定的情况下,其 postion:relative;top:-50%;无效 后来查阅w3c看到这样一句话: <percentage&g ...

  2. div高度自适应（总结：min-height:100px; height:auto;的用法）

    对于div高度自适应问题,我总是用一句话:height:auto来解决. 但是很多时候我们需要的是当div内部有内容时,高度会随着内容的增加和增加,当div中没有内容时,div能够保持一个固定的高度. ...

  3. js不需要知道图片宽高的懒加载方法（经过实际测试，不加宽高仍然是无法正常加载的，设置height:auto,height:100%，仍然显示高度为0）

    js不需要知道图片宽高的懒加载方法 懒加载是如何实现的? - 简书https://www.jianshu.com/p/e86c61468285找到一个不需要知道图片宽高的懒加载方法了(经过实际测试,不 ...

  4. 不定高度的div背景或背景图片不显示问题

    在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在IE浏览器下显示正常.但是使用Firefox/opera浏览时却出现最外层Div的背景颜色和边框不起作用的问题. ...

  5. CSS，height:auto和height:100%有什么区别？

    auto是随内容的高度而撑开的.100%是根据父级元素的高度来决定的.例如:<div style="height:100px;width:200px;"> <di ...

  6. height:100%和height:auto的区别

    一直不明白height:100%和height:auto的区别,最近在制作前端页面时都用了height:100%;overflow:hidden; ,可是有些浏览器出现莫名的奇妙的问题,但换成heig ...

  7. height:auto 火狐没边框

    css高度设置为auto后,设置的边框 ie正常 火狐 就没有边框了,解决方法 之前是这样写的 #right_bottom { width: 790px; height:auto; border: # ...

  8. div+css中height:auto !important; height:663px; min-height:663px !important;区别

    height:auto !important是高度自适应,主要的是,!important只是对于ie6不认识而已,其他浏览器都是以这个为最高的优先级,执行这个,ie6会无视这个,不是只有火狐而已hei ...

  9. 设置了width和height的a元素在IE11与IE11以下浏览器中的不同渲染方式

    #welcomeMiddleBtn { display: block; width: 73px; height: 120px; margin: 0px auto; } <a id="w ...

随机推荐

  1. Find n‘th number in a number system with only 3 and 4

    这是在看geeksforgeeks时看到的一道题,挺不错的,题目是 Given a number system with only 3 and 4. Find the nth number in th ...

  2. text输入框中按下enter键时阻止刷新页面

    1.在js中加入一个方法: function judge_enter(){ if(window.event.keyCode==13){ return false;//阻止页面刷新的作用 } } 2.然 ...

  3. POJ3928、LA4329【树状数组】

    借此题试验一下各种做法的效果~ 这题为ACM2008北京站某题,介于简单与中等之间,做出来,罚时不多基本可以铜了,所以这样的题还必须得会,进阶之路. add(a[i]+1,1)这样处理之后,再用sum ...

  4. Linux device tree 简要笔记

    第一.DTS简介     在嵌入式设备上,可能有不同的主板---它们之间差异表现在主板资源不尽相同,比如I2C.SPI.GPIO等接口定义有差别,或者是Timer不同,等等.于是这就产生了BSP的一个 ...

  5. UTF-8 BOM(EF BB BF)

    原标题:link标签和script标签跑到body下面,网页顶部有空白,出现“锘匡豢”乱码,UTF-8 BOM,EF BB BF 来自:http://tunps.com/link-and-script ...

  6. Spring MVC 3.0 请求转发和重定向

    首先看一下如何获得request对象.session对象: 普通的Controller类,示例代码如下: @Controller @RequestMapping(value = "user& ...

  7. js正則表達式语法

    1. 正則表達式规则 1.1 普通字符 字母.数字.汉字.下划线.以及后边章节中没有特殊定义的标点符号,都是"普通字符".表达式中的普通字符,在匹配一个字符串的时候,匹配与之同样的 ...

  8. Cocos2D-X2.2.3学习笔记9(处理重力感应事件,移植到Android加入两次返回退出游戏效果)

    这节我们来学习Cocos2d-x的最后一节.怎样处理重力感应事件.移植到Android后加入再按一次返回键退出游戏等.我这里用的Android.IOS不会也没设备呃 效果图不好弄,由于是要移植到真机上 ...

  9. vi 命令 使用方法

    一.Unix编辑器概述       编辑器是使用计算机的重要工具之中的一个,在各种操作系统中,编辑器都是不可缺少的部件.Unix及其类似的ix 操作系统系列中,为方便各种用户在各个不同的环境中使用,提 ...

  10. MySQL Handler变量解析

      http://blog.itpub.net/29254281/viewspace-1159014/ To see the effect of a query do the following st ...