Почему скрытый div с меню выскакивает при ресайзинге окна браузера?

Question

[dhat]

По замыслу, при ресайзинге окна браузера на 720px желтое горизонтальное меню исчезает, и я могу развернуть новое адаптивное меню нажав вверху справа кнопку +Menu. В целом, код работает, но есть непредвиденный глюк - когда я изменяю вручную окно браузера, достигнув брейкпоинта это новое адаптивное зеленое меню срабатывает анимация - оно выскакивает и быстро схлопывается. Почему оно вылазит без спросу, и как это исправить?

codepen.io/dhatt/pen/mEgkRO

Answer 1

[Максим]

надо absolute и left - равный размеру меню
либо дисплей ноне и показывать на js

codepen.io/Geyan/pen/vKrqdy вот так примерно

Comments

[dhat]

Для какого элемента? .main-menu?

[dhat]

position: absolute; не дает никакого эффекта.

[dhat]

Дисплей нон ломает желтое меню.

[Максим]

dhat: я показал пример смотри

[dhat]

Максим Жаров: не совсем то что у меня, но я попробую переписать код, спасибо.

[Максим]

dhat: или вот так , codepen.io/Geyan/pen/VjNJqP?editors=0110

[dhat]

Максим Жаров: вот это фактически то что надо. только я не могу понять что делает элемент .show?

[Максим]

dhat: это кнопка при клике на которую происходит открытие второго меню

[dhat]

Максим Жаров: спасибо, попробую это решение.

Answer 2

[Андрей Федоров]

Из-за анимации. Сайдбару нужно давать изначально скрытое положение. У вас он открыт и в медиазапросе вы даете ему скрытое положение. В итоге он анимировано "уезжает".

Comments

[dhat]

Вроде бы они и есть изначально скрытое - margin-left: -100%; для .main-menu

[Андрей Федоров]

dhat: изначально оно открыто - оранжевый тулбар. медиазапрос трансформирует его в зеленый сайдбар, так же открытый. поставьте transition: 3s - увидите сами.

[Андрей Федоров]

dhat: и еще margin анимировать плохая практика. используйте transform: translate() в это случае подключется аппаратное ускорение.

[dhat]

Андрей Федоров: я вас понял. А как же его сделать изначально скрытым, при этом показывать желтое меню?

[dhat]

Кроме как создать совершенно иное, не используя медиазапросы...

[Андрей Федоров]

dhat: Вы могли бы скрывать ваше меню по медиазапросу совсем display: none, а уже в классе active давать ему видимость - display: block или что-то типа того.

[dhat]

Андрей Федоров: не подскажите что почитать на тему лучших практик когда уместо использовать transition для анимационных эффктов легких? transform: translate() не дает анимации. Что же тогда уместно использовать в подобных случаях? Фреймворками обходиться?

[Андрей Федоров]

dhat: Не подскажу, но буквально недавно наткнулся на статью по аппаратное ускорение в браузерах. Еженедельное чтиво - https://habrahabr.ru/company/zfort/blog/308190/

[Андрей Федоров]

dhat: Нашел вам статью про быстродийствие https://habrahabr.ru/post/308006/

[dhat]

Андрей Федоров: спасибо! Читаю.