Как остановить меню вне холста из анимации в браузере размера

Question

У меня есть от демо меню холста здесь:

jsfiddle

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

JS просто переключает класс на элемент HTML. Переходы и преобразования CSS выполняют перемещение и анимацию меню. Это потому, что в этом меню есть переход на нем, поэтому он оживляет перемещение его с экрана для меньшего размера экрана. Я хочу переход, когда вы нажимаете кнопку переключения, но я не хочу этого, только когда размер браузера изменяется.

Обратите внимание, что я не хочу использовать JS для анимации.

HTML:

<header class="Header" role="banner"> 
    <div class="GlobalLogo"></div> 
    <button class="GlobalNavToggle js-globalNavToggle" type="button">Toggle navigation</button> 
    <nav class="GlobalNav"> 
     <!--<h2 class="u-srOnly">Main Menu</h2>--> 
     <ul class="GlobalNav_list"> 
      <li class="GlobalNav_item"> 
       <a class="GlobalNav_link" href="#">Top level 1</a> 
      </li> 
      <li class="GlobalNav_item"> 
       <a class="GlobalNav_link" href="#">Top level 2</a> 
      </li> 
      <li class="GlobalNav_item"> 
       <a class="GlobalNav_link" href="#">Top level 3</a> 
      </li> 
      <li class="GlobalNav_item"> 
       <a class="GlobalNav_link" href="#">Top level 4</a> 
      </li> 
      <li class="GlobalNav_item"> 
       <a class="GlobalNav_link" href="#">Top level 5</a> 
      </li> 
     </ul> 
    </nav> 
</header> 
<div class="Main clearfix" role="Main"> 
    <p>...</p> 
</div> 

SCSS:

body { 
    margin: 0; 
    .isActiveGlobalNav & { 
     overflow: hidden; 
    } 
} 

.clearfix:before, 
.clearfix:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.clearfix:after { 
    clear: both; 
} 

.Container { 
    max-width: 900px; 
} 

.Main { 
    clear: both; 
    margin-top: 30px; 
} 

.GlobalLogo { 
    float: left; 
    margin-right: 20px; 
    background-size: 100%; 
    background-image: url('http://placehold.it/100x35'); 
    background-repeat: no-repeat; 
    width: 100px; 
    height: 35px; 
} 

.GlobalNav { 
    clear: both; 
    @media only screen and (max-width : 600px) { 
     width: 70%; 
     transform: translate3d(-100%, 0, 0); 
     position: absolute; 
     background: rgba(0,0,0,.9); 
     top: 0; 
     bottom: 0; 
     left: 0; 
     right: 0; 
     transition: transform .25s ease-in; 

     .isActiveGlobalNav & { 
      transform: translate3d(0, 0, 0); 
     } 
    } 
    @media only screen and (min-width : 601px) { 
     clear: none; 
     float: left; 
    } 
} 
.GlobalNav_list { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
.GlobalNav_item { 
    @media only screen and (min-width : 601px) { 
     float: left; 
    } 
} 
.GlobalNav_link { 
    padding: 10px; 
    display: block; 
    color: white; 
    text-decoration: none; 
    @media only screen and (min-width : 601px) { 
     color: black; 
    } 
} 

.GlobalNavToggle { 
    float: right; 
    margin-top: 7px; 
    line-height: 20px; 
    background: yellow; 
    border: none; 
    cursor: pointer; 
    @media only screen and (min-width : 601px) { 
     display: none; 
    } 
} 

JS

var navigation = function() { 

    var $html = $('html'), 
     //$globalNav = $('GlobalNav'), 
     $globalNavToggle = $('.js-globalNavToggle'); 

    $globalNavToggle.on('touchstart click', function() { 

     $html.toggleClass('isActiveGlobalNav'); 

    }); 

}; 

navigation(); 

Answer 1

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

$(window).on('resize', function(){ 
    clearTimeout(timeout); 
    $globalNav.removeClass('animated'); 
    timeout = setTimeout(function(){ 
     $globalNav.addClass('animated'); 
    }, 100); 
}); 

(оригинальная идея from here)

и jsFiddle