Jquery 和 CSS 转换溢出

Question

几天来我一直在为这个问题苦苦挣扎，我有这个页面.... http://new.sekanskin.com/what-we-do/

在这个页面中我有一堆按钮，当你点击其中一个按钮时我希望它显示特定的部分。

我曾尝试使用切换并最初隐藏它们，但我使用的是 Wordpress WPBarkery 并且最初隐藏元素并不能很好地使用它。

我尝试过使用 css transitions 实现最大高度，但这会弄乱每个部分下方的视差。

目前，我可以通过 toggleClass 显示/隐藏该部分，但我需要做的就是向其添加动画，如果我知道我不能使用 show hide 或 css transition 来获得最大高度，我该怎么做呢。

我也尝试过使用转换来转换 scaleY，但我不喜欢它在从 0 转换到 1 时如何让我的内容被压扁。

CSS

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

.toggle {
    overflow: visible;
}

这个我也试过

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

jQuery

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

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


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

});

return false;

});

我也试过这个小技巧

setTimeout(function(){ $('section1').hide() }, 3000);

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

                $('section1').slideToggle("slow", function() { 

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

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

                    });

                });

                return false;
            });

3 秒后隐藏该部分，以免弄乱我的内容，然后切换幻灯片，然后切换类并重新触发视差。我也尝试过另一种方式(切换类然后切换幻灯片)

Answer 1

当你添加你的类时，在 CSS 中将动画附加到该类，你就会有你的过渡。 Animate Animate2