Question

几天来我一直在努力解决这个问题，我有此页面。...http://new.sekanskin.com/what-we-do/

在此页面中，我有一堆按钮，当您单击其中一个按钮时，我希望它显示特定部分。

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

我已经尝试过使用CSS过渡来获取最大高度，但这会弄乱每个部分下方的视差。

当前，我能够通过toggleClass显示/隐藏该部分，但是我要做的就是向其中添加动画，如果我不能对max-height使用show hide或css过渡，该怎么做呢？ / p>

我也尝试过使用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

jQuery和CSS过渡溢出

1 个答案: