Как я могу предотвратить анимацию адаптивного навигационного меню (на основе перехода CSS3), когда разные медиа-запросы вступают в силу?
Я пытаюсь создать адаптивный веб-сайт с меню навигации, которое удовлетворяет следующим двум требованиям:
Навигация полностью видна в обычном окне браузера, расположенном горизонтально.Навигация становится переключаемым вертикальным меню для мобильных устройств и небольших экранов, которое анимируется между его «открытым» и «закрытым» состоянием.Я хочу, чтобы производительность была хорошей на мобильных устройствах - особенно на iOS - что означает, что анимация должна использоватьGPU-ускоренное преобразование translate3d CSS переход.
Моя проблемаЭто было очень просто, и по большей части это прекрасно работает. я использовалz-index: 1
а такжеtransform: translate3d(0,-100%,0)
скрыть меню за заголовком сz-index: 2
в закрытом состоянии по умолчанию, а затемtransform: translate3d(0,0,0)
оживить меню до его открытого состояния.
Но у меня только одна проблема:Когда я изменяю размер своего окна браузера Chrome и запускается запрос мобильного мультимедиа, меню анимируется из открытого в закрытое состояние.
Измените размер окна браузера до ширины менее 600 пикселей, чтобы увидеть проблему в действии:
Полноэкранный jsfiddle:http://fiddle.jshell.net/ymDYG/1/show/Оригинал jsfiddle:http://jsfiddle.net/ymDYG/1/Я думаю, я знаю, почему это происходит: когда запускается запрос мобильного медиа, браузер видит это.nav
в данный момент не активен, поэтому он анимирует его в закрытое состояние по умолчанию. Я пытался экспериментировать с использованиемdisplay:none
а такжеdisplay:block
для разных состояний медиазапроса, но это, кажется, полностью нарушает анимацию.
Как я могу предотвратить запуск анимации «закрытия» навигационного меню при изменении размера окна браузера?