Предисловие

Я пытаюсь создать адаптивный веб-сайт с меню навигации, которое удовлетворяет следующим двум требованиям:

Навигация полностью видна в обычном окне браузера, расположенном горизонтально.Навигация становится переключаемым вертикальным меню для мобильных устройств и небольших экранов, которое анимируется между его «открытым» и «закрытым» состоянием.

Я хочу, чтобы производительность была хорошей на мобильных устройствах - особенно на 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 для разных состояний медиазапроса, но это, кажется, полностью нарушает анимацию.

Как я могу предотвратить запуск анимации «закрытия» навигационного меню при изменении размера окна браузера?