jQuery动画高度和溢出

Question

我正在使用 CSS 和 jQuery。我有一个切换类的 jQuery click 事件。当元素未切换时，高度为 0 并且溢出被隐藏，当我切换类时高度仍然为 0，但溢出是可见的。我的问题是如何制作动画？我正在寻找向下滑动溢出隐藏元素中的内容。

CSS

.section1, .section2, .section3, .section4, .section5, .section6, .section7 {
     overflow: hidden;
     height: 0px;
}

.toggle {
     overflow: visible;
}

jQuery

   $('.architectural-films').bind('click', function(e){

       $(".section1").toggleClass("toggle").promise().done(function(){ 


           $(window).trigger('resize.px.parallax');

       });

       return false;
    });

更新

我尝试了以下方法：

.section1, .section2, .section3, .section4, .section5, .section6, .section7 {
     overflow: hidden;
     transform: scaleY(0);
     transform-origin: top;
     transition: transform 0.15s ease-out;
     max-height: 0px;
}

.toggle {
     overflow: visible;
     transform: scaleY(1);
     transition: transform 0.15s ease-in;
}

问题是当移除切换类时，转换不会发生。

Answer 1

您可以使用max-height 属性，但您必须将其设置为某个固定值：

.section1, .section2, .section3, .section4, .section5, .section6, .section7 {
     overflow: hidden;
     max-height: 0px;
     transition: max-height 0.15s ease-out;
}

.toggle {
     overflow: visible;
     max-height: 200px;
}

如果您想要自动高度，您可以使用transform 属性：

.section1, .section2, .section3, .section4, .section5, .section6, .section7 {
     overflow: hidden;
     transform: scaleY(0);
     transform-origin: top;
     transition: transform 0.15s ease-out;
}

.toggle {
     overflow: visible;
     transform: scaleY(1);
}