jQuery动画高度和溢出

Posted 2023-03-06

【中文标题】jQuery动画高度和溢出

【英文标题】：jQuery animate height and overflow

【发布时间】：2019-05-26 19:43:05

【问题描述】：

我正在使用 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;

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

【参考方案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);

【讨论】：

现在试试这个。

我更新了我的问题，效果很好，但在移除类切换时不会转换。

另外，当使用变换时，.section 中的内容在过渡时会被压扁。

我刚刚尝试了最大高度的想法，当删除切换类时，一切看起来都很奇怪。 new.sekanskin.com/what-we-do