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);
}

jQuery动画高度和溢出

1 个答案: