JQuery / CSS3：动画自动高度变化

我需要在父容器更改时对其高度进行动画处理.问题是它的高度设置为自动,因此高度取决于内容.我想要实现的最终目标是,只要高度因内容被改变而改变,可以通过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;   
}

原文地址：https://www.jb51.cc/jquery/176359.html