如何在浏览器调整大小时阻止画布外菜单动画答案

【问题标题】：How to stop an off-canvas menu from animating on browser resize如何在浏览器调整大小时阻止画布外菜单动画
【发布时间】：2015-01-16 11:11:34
【问题描述】：

我在这里有一个非画布菜单演示：

jsfiddle

切换按钮本身按预期工作（菜单滑入和滑出），但问题是当菜单“关闭”时，如果您将浏览器从宽调整为窄，您会看到菜单动画。

JS 只是在 HTML 元素上切换一个类。 CSS transitions 和 transforms 做菜单的移动和动画。这是因为该菜单上有一个过渡，因此它正在动画将其移出屏幕以适应较小的屏幕尺寸。我想要在您单击切换按钮时进行转换，但我不希望仅在调整浏览器大小时进行。

请注意，我不想将 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;
    }
}

var navigation = function () {

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

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

        $html.toggleClass('isActiveGlobalNav');

    });

};

navigation();

【问题讨论】：

标签： jquery html css

【解决方案1】：

我可以建议将过渡移动到一个单独的类，而不是在调整大小时删除该类并在停止调整大小时将其返回：

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

（原创想法from here）

和jsFiddle

【讨论】：

这太好了，谢谢！我不知道“调整大小”方法。