当不同的媒体查询生效时，如何防止响应式导航菜单（由CSS3过渡提供动力）动画？ [英] How can I prevent a responsive nav menu (powered by a CSS3 transition) from animating when different media queries take effect?

问题描述

我正在尝试创建一个具有满足以下两个要求的导航菜单的响应式网站：

I'm trying to create a responsive website with a navigation menu that satisfies the following two requirements:

1. 导航在水平放置的普通浏览器窗口中完全可见。


2. 导航成为移动设备和小屏幕的可切换垂直菜单，在打开和关闭状态之间设置动画。

我希望在移动设备（尤其是iOS）上表现出色表示动画应使用 GPU加速的translation3d变换 CSS过渡。

I want performance to be good on mobile devices — especially on iOS — which means that the animation should use a GPU-accelerated translate3d transform CSS transition.

设置好这是小菜一碟，对于大部分情况下效果很好。我使用 z-index：1 和 transform：translate3d（0，-100％，0）隐藏菜单在标头后面的 z-index：2 处于默认关闭状态，然后进行 transform：translate3d（0,0,0）将菜单设置为打开状态。

Setting this up was a piece of cake, and for the most part it works great. I used z-index: 1 and transform: translate3d(0,-100%,0) to hide the menu behind a header with z-index: 2 in its default closed state, and then transform: translate3d(0,0,0) to animate the menu to its opened state.

但是我只是遇到一个问题：当我调整Chrome浏览器窗口和移动媒体的大小时查询启动，菜单从打开状态变为关闭状态。

But I'm just having one problem: When I resize my Chrome browser window and the mobile media query kicks in, the menu animates from an opened to closed state.

将浏览器窗口的大小调整为小于600px，以查看实际出现的问题：

Resize your browser window to less than 600px wide to see the problem in action:

• 全屏jsfiddle： http://fiddle.jshell.net/ymDYG/1/show/


• 原始jsfiddle： http://jsfiddle.net/ymDYG/1/

• Fullscreen jsfiddle: http://fiddle.jshell.net/ymDYG/1/show/
• Original jsfiddle: http://jsfiddle.net/ymDYG/1/

I想想我知道为什么会这样：当启动移动媒体查询时，浏览器发现 .nav 不是最新的处于活动状态，因此会将其设置为默认关闭状态。我尝试使用 display：none 和 display：block 尝试不同的媒体查询状态，但这似乎完全破坏动画。

I think I know why this is happening: when the mobile media query kicks in, the browser sees that .nav is not currently active, so it animates it to the default closed state. I've tried experimenting with using display:none and display:block for the different media query states, but that seems to completely break the animation.

如何在调整浏览器窗口大小时防止导航菜单的关闭动画触发？

How can I prevent the nav menu's "closing" animation from firing as the browser window is resized?

推荐答案

很好，很干净。我可以偷吗？ ：-）

Nice job, very clean. Can i steal it? :-)

无论如何，这是您的> strong>演示 。

Anyway, here's your solution with a demo.

我刚刚将过渡内容转移到另一堂课：

I just moved the transition to another class:

.nav {
    /* stuff */
    z-index: 1;
    transform: translate3d(0,-100%,0);
    -webkit-transform: translate3d(0,-100%,0);
}
.nav.active {
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}
.nav.activated {
    transition: transform 400ms linear;
    -webkit-transition: -webkit-transform 400ms linear;
}

您可以在第一个切换中添加元素：

Which you can add to the element at first "Toggle":

function toggle(){
    $(".nav").addClass("activated").toggleClass("active");
}

---

P.S。如果您甚至不希望在用户打开菜单然后再次调整窗口大小之后进行转换，则可以使用Modernizr的 mq 方法：

$(window).on('resize',function(){
    if(Modernizr.mq('(min-width:600px)')) $(".nav").removeClass("activated");
});

这篇关于当不同的媒体查询生效时，如何防止响应式导航菜单（由CSS3过渡提供动力）动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！