我需要在父容器更改时对其高度进行动画处理.问题是它的高度设置为自动,因此高度取决于内容.我想要实现的最终目标是,只要高度因内容被改变而改变,可以通过jQuery或
CSS3来改变动画.
我已经搜索了类似的主题,但是我发现的是如何将高度从固定值设为“auto”:(
解决方法
你可以通过CSS获得你以后的效果.而不是动画div的高度,动画max-height属性.将悬停的最大高度设置为您认为最大高度(超过体贴).原因是,如果将max-height设置为10000px,并且div的高度为1000px,并且将动画的持续时间设置为1秒,则它将在0.1秒后清除内容高度,并且将显示为asthough转换结束后,max-height值超过1000px将无效.所以,更准确的最大高度更适合于更一致的动画.
http://jsfiddle.net/2QcCC/2/
.container {
height: auto;
min-height: 100px;
max-height: 100px;
transition: 1s max-height;
overflow: hidden;
}
.container:hover {
max-height: 4000px;
}