不定⾼度的元素实现transition动画_如何为height：auto的div添
加css。。。
⼀个元素不设置⾼度时，height的默认值是 auto，浏览器会⾃动计算出实际的⾼度。那么如何为⼀个height:auto的元素添加 css3动画呢？在MDN⽂档中css ⽀持动画的属性中的 height 属性如下：当 height 的值是 length，百分⽐或 calc() 时⽀持 css3 过渡，所以当元素 height : auto 时，默认是不⽀持 css3 动画的。
为了解决这个问题，我们可以通过js 获取精确的 height 值，或者使⽤max-height 代替 height。只需要设置⼀个肯定⽐元素⾃增长⼤的⾼度值，由于是根据 max-height 值进⾏过渡效果，所以最好不要⼤得离谱，否则动画效果不理想。下⾯就介绍这2种⽅式的实现：
1、利⽤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>
2、通过js获取⾼度
css:
.box { width: 400px; padding: 20px; border: 40px solid #a0b3d6; background-color: #eee; overflow: hidden; }
.loading { height: 100%; background: url(loading.gif) no-repeat center; }
.in { width: 100px; margin: 0 auto;  border: 50px solid #beceeb; background-color: #f0f3f9; }
[type=button] { width: 100px; height: 32px; font-size: 100%; }
html:
<div id="box">...</div>
<p>
<input type="button" id="button" value="点击我">
</p>
js:
// ⾼度⽆缝动画⽅法
var funTransitionHeight = function(element, time) { // time, 数值，可缺省
if (ComputedStyle == "undefined") return;
var height = ComputedStyle(element).height;
ansition = "none";    // 本⾏2015-05-20新增，mac Safari下，貌似auto也会触发transition, 故要none下~    element.style.height = "auto";
html动画效果var targetHeight = ComputedStyle(element).height;
element.style.height = height;
element.offsetWidth = element.offsetWidth;
if (time) ansition = "height "+ time +"ms";
element.style.height = targetHeight;
};

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。