如何阻止画布菜单在浏览器调整大小时显示动画

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);
});

（ 来自这里的原始想法）

和jsFiddle