Установите родительский элемент как скрытое переполнение, чтобы отключить анимацию, но продолжать показывать дочерний элемент
У меня есть два меню, между которыми вы можете переключаться с помощью переключателя. Каждый пункт меню имеет раскрывающийся список, который отображается при нажатии на пункт меню.
Проблема заключается в том, что при нажатии на переключатель отображается анимация перехода между двумя меню (выдвижение и выдвижение). Я хочу сохранить скользящую анимацию только внутри элемента меню, поэтому я использовал overflow-y: hidden;, чтобы это произошло. Однако это также отключает мои выпадающие меню, поскольку они являются дочерними элементами родителя, у которого есть overflow: hidden.
Я сделал codepen, показывающий проблему здесь:
https://codepen.io/twan2020/pen/jOMMoom
Когда вы переключаете меню, вы можете видеть, что анимация переполняет контейнер меню.
Если я использую приведенный ниже код, анимация выглядит красиво, но меню больше не открывается при нажатии на элемент.
.categoriemenu .categorielijst {
width: 100%;
margin-bottom: 0px;
display: flex;
justify-content: space-evenly;
position: relative;
overflow-y: hidden;
}
Как я могу это исправить?
Я попытался установить product-menu (который является классом раскрывающихся меню) на position:fixed, но это нарушает стиль, мое меню также имеет переменную высоту, поэтому я хотел бы знать, есть ли более простое решение для этого?
@CBroe Я не думал об этом. Звучит как отличное решение. Я попробую это.
@CBroe Заработало, установив overflow-y:hidden только на время анимации. Спасибо
возможно, вы хотите рассмотреть возможность написания самостоятельного ответа со своим решением, чтобы избежать ответа только в комментариях. см. stackoverflow.com/help/self-answer
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я исправил это, установив таймер на overflow-hidden на продолжительность анимации следующим образом:
$('.toggle-switch input').on('change', function() {
if ($('input[name=switch]:checked', '.toggle-switch').val() == 1) {
$(".categorielijst").css('overflow-y', 'hidden');
$("#menu1").addClass('animate__slideInUp');
$("#menu2").addClass('animate__slideOutUp');
$("#menu1").css('display', 'flex');
$("#menu1").removeClass('animate__slideOutDown');
$("#menu2").removeClass('animate__slideInDown');
setTimeout(function() {
$(".categorielijst").css('overflow-y', 'visible');
}, 600)
} else if ($('input[name=switch]:checked', '.toggle-switch').val() == 2) {
$(".categorielijst").css('overflow-y', 'hidden');
$("#menu1").css('position', 'absolute')
$("#menu1").addClass('animate__slideOutDown');
$("#menu2").addClass('animate__slideInDown');
$("#menu2").css('display', 'flex');
$("#menu1").removeClass('animate__slideInDown');
$("#menu2").removeClass('animate__slideOutUp');
setTimeout(function() {
$(".categorielijst").css('overflow-y', 'visible');
}, 600);
}
});
Это не идеально, потому что, если вы спамите переключатель, он все равно иногда будет давать сбои и переполняться из контейнера, но если вы нажмете, как обычный человек, он будет работать нормально.
Существуют решения/обходные пути для «Выход из скрытого переполнения», но они довольно сложны и зависят от конкретных обстоятельств. Я предполагаю, что вам лучше всего применить
overflow-y: hiddenтолько на время анимации переключения меню, а затем сбросить его до значения по умолчанию.