如何为不定高度(height:auto)的元素添加CSS3 transition-property:height 动画
但一个元素不设置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 动画的更多相关文章
- 父元素高度为auto,子元素使用top:-50%没有效果的问题
无意间在实现元素垂直居中的一种方式测试到,当一个元素高度没有指定的情况下,其 postion:relative;top:-50%;无效 后来查阅w3c看到这样一句话: <percentage&g ...
- div高度自适应（总结：min-height:100px; height:auto;的用法）
对于div高度自适应问题,我总是用一句话:height:auto来解决. 但是很多时候我们需要的是当div内部有内容时,高度会随着内容的增加和增加,当div中没有内容时,div能够保持一个固定的高度. ...
- js不需要知道图片宽高的懒加载方法（经过实际测试，不加宽高仍然是无法正常加载的，设置height:auto,height:100%，仍然显示高度为0）
js不需要知道图片宽高的懒加载方法 懒加载是如何实现的? - 简书https://www.jianshu.com/p/e86c61468285找到一个不需要知道图片宽高的懒加载方法了(经过实际测试,不 ...
- 不定高度的div背景或背景图片不显示问题
在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在IE浏览器下显示正常.但是使用Firefox/opera浏览时却出现最外层Div的背景颜色和边框不起作用的问题. ...
- CSS，height:auto和height:100%有什么区别？
auto是随内容的高度而撑开的.100%是根据父级元素的高度来决定的.例如:<div style="height:100px;width:200px;"> <di ...
- height:100%和height:auto的区别
一直不明白height:100%和height:auto的区别,最近在制作前端页面时都用了height:100%;overflow:hidden; ,可是有些浏览器出现莫名的奇妙的问题,但换成heig ...
- height:auto 火狐没边框
css高度设置为auto后,设置的边框 ie正常 火狐 就没有边框了,解决方法 之前是这样写的 #right_bottom { width: 790px; height:auto; border: # ...
- div+css中height:auto !important; height:663px; min-height:663px !important;区别
height:auto !important是高度自适应,主要的是,!important只是对于ie6不认识而已,其他浏览器都是以这个为最高的优先级,执行这个,ie6会无视这个,不是只有火狐而已hei ...
- 设置了width和height的a元素在IE11与IE11以下浏览器中的不同渲染方式
#welcomeMiddleBtn { display: block; width: 73px; height: 120px; margin: 0px auto; } <a id="w ...
随机推荐
- extjs tablepanel 高度自适应有关问题
extjs tablepanel 高度自适应问题 项目中为了给客户好点的功能切换体验,想到了用extjs的tabpanel 在页面中用了tabpanel后,高度新打开的tab页的iframe 的高度总 ...
- JDK - Tomcat - Eclipse - JSP - Servlet 配置运行全攻略
花了将近两个月的时间,从 JDK 开始一步一步摸索,历经千辛万苦,终于让第一个 Servlet 运行起来了,创建第一个 Servlet 程序确实要比创建第一个 Asp.net 程序困难多了,但是不要 ...
- 使用generator自动生成Mybatis映射配置文件
在使用mybatis时,映射文件的配置非常麻烦,对于做逻辑不是很复杂,功能不是特别关键的模块的时候,我们没有必要手动书写,可以使用generator工具生成. generator工具实际上就是根据数据 ...
- 网易新闻优化APK下载链接
你好,欢迎你的访问! 本次是APK包的下载链接: 点我下载 这是我目前实现的效果,正在完善中...
- swift:自定义UICollectionViewFlowLayout
写作目的 UICollectionView是ios中一个十分强大的控件,利用它能够十分简单的实现一些很好看的效果.UICollectionView的效果又依赖于UICollectionViewLayo ...
- iOS开发——UI篇Swift篇&UISwitch／UIStepper
UISwitch/UIStepper override func viewDidLoad() { super.viewDidLoad() titleLabel.text = titleString / ...
- IE9-10 option BUG
IE 9-10下如果option元素没有定义value而在设置innerText时没有把两边的空白去掉,那么 取el.text,浏览器会进行trim, 并且伪造一个value值,此值会在刚才trim的 ...
- 随机 I/O & 顺序 I/O
在谈这俩概念前.先来说说 大I/O vs. 小I/O 通常.我们把 <=16KB 的I/O认为是小I/O.而 >=32KB 的I/O认为是大I/O 了解I/O的大小.影响到 ...
- C#属性(Attribute)用法实例解析
属性(Attribute)是C#程序设计中非常重要的一个技术,应用范围广泛,用法灵活多变.本文就以实例形式分析了C#中属性的应用.具体入戏: 一.运用范围 程序集,模块,类型(类,结构,枚举,接口,委 ...
- 使用C#实现读取/写入Excel表
C#实现写入Excel表 using System; using System.Reflection; using System.IO; using Microsoft.Office.Interop. ...