javascript - jQuery:混合 div 元素应该平滑地扩展 parent-div 的自动高度

Question

jQuery 还是新手，所以:快速提问。我有一个 div，它包含用于响应式投资组合 weblayout 的各种对象。一开始只显示了 3 个对象，其余的是 display: none; 通过 CSS。通过一个按钮，这些不可见的对象可以通过 JavaScript 混入。代码看起来像这样:

$('#maindiv').click(function() {
    $(this).find('.objects').fadeIn();
});

工作正常，但由于 #maindiv 在 CSS 文件中设置了 height: auto，#maindiv 的高度> 一旦新对象开始消失，就跳起来。由于我需要的 auto 值，通过 CSS 的过渡动画显然不起作用。所以问题是:JavaScript 是否有任何方法可以使 #maindiv 的高度以某种方式从旧的自动值动画到新的自动值？或者类似的东西？

Answer 1

有一种方法，尽管它不是 100% 可预测/可控制的动画运行速度。您可以只设置最大高度的动画，这样您仍然可以使用 height: auto。

div {
max-height:1.2em;

-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;

like this