Я боролся с этой проблемой уже несколько дней, у меня есть эта страница .... http://new.sekanskin.com/what-we-do/
На этой странице у меня есть куча кнопок, когда вы нажимаете на одну из кнопок, которые яЯ хочу, чтобы он показывал определенный раздел.
Я пытался использовать переключатель и сначала скрывать их, но я использую Wordpress WPBarkery, а первоначальное скрытие элемента не работает с ним.
У меня естьпопытался использовать CSS-переходы для максимальной высоты, но это портит параллакс под каждым разделом.
В настоящее время я могу показать / скрыть раздел с помощью toggleClass, но все, что мне нужно сделать, это добавить анимацию вэто, как бы мне это сделать, зная, что я не могу использовать show hide или css для максимальной высоты.
Я также пытался преобразовать 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 секунды, чтобы он не испортил мой контент, затем переключите слайд, затем переключите класс и повторно активируйте параллакс.Я также попробовал другой способ (переключить класс, затем переключить слайд)