Почему меню отъезжает так криво?

Question

[dhat]

Пробую сделать так, чтобы по медиазапросу меню отъезжало и возвращалось влево когда достигает 720px. И если при увеличении экрана все работает как надо, меню уезжает вбок как следует, то при обратном процессе - когда я уменьшаю экран - исчезновение происходит криво: желтый фон дива просто исцезает без анимации, и самое главное можно заметить как пункты меню ul становятся в колонку и уезжают в левый бок. Почему мой код работает только в одну сторону?

codepen.io/dhatt/pen/PzgrPa

Comments

[Денис Славский]

В Edge всё работает корректно:)

[dhat]

Денис Славский: в Хроме и ФФ криво :( Эдж не проверял. Если не трудно, посмотрите как в этих браузерах?

[Денис Славский]

dhat: в FF Developer Edition тоже корректно. В Хроме, к сожалению, проверить не могу.

[HamSter]

dhat: .main-menu-2 - не задан transition для фона, + translate(-500px) - конечно оно будет уезжать за пределы видимости.

Answer 1

[gleendo]

Перемудрили вы что то с кодом.
codepen.io/evg_/pen/KrYOmO?editors=1100

Comments

[dhat]

Так у вас transition all .3s применен ко всей странице. Зачем? Мне надо только меню.

[dhat]

Решение наверное хорошее, только я НИХЕРА не понял в Stylus))) Это вы подразнить меня решили?

[dhat]

Нашел компилятор из Стайлус в цсс. Но до сих пор я не пойму, зачем transition all .3s применен ко всей странице?

[dhat]

OMG, после получаса дрочбы над этим гребанным кодом я увидел что тут max-width ф не min. Да вы мля издеваетесь надо мной))

[gleendo]

dhat: ахахах, ну transition просто ко всему сразу применил, сути не меняет, если нужно только для меню, то уберите для всей страницы и добавьте только для меню. Ну и на счет stylus. Все довольно просто, ничего отличного от обычного css нет, кроме как отсутствие фигурных скобок, двоеточий и точки с запятой. Да и на codepen есть встроенная возможность перевести все в обычный css.
А на счет min-width и max-width не понял что вы имели ввиду..
Работает то мой пример так как нужно?

[dhat]

evg_: к сожалению, мне не удалось ваш код засунуть в свой шаблон. Целый день в нем ковыряюсь. Если не трудно, то вот посмотрите - https://github.com/sincu/issue-menu

По прежнему - при сворачивании список становится вертикальным.

[gleendo]

dhat: Замените у себя в проекте файл masthead.css на это https://cloud.mail.ru/public/4cWe/iqBCcpScP
Думаю это то что нужно

[dhat]

evg_: спасибо вам за помощь и уделенное время, думаю это то что надо, постараюсь из этого слепить что хотел.

Answer 2

[Андрей Верх]

Вполне очевидно, что другие трансформации применяются мгновенно и без анимации. Отсюда и проблемы. Поэтому в обратную сторону всё и работает.

Плюс некоторые стили, например тот-же оранжевый фон, прописаны только для >720.