How can I prevent a responsive nav menu (powered by a CSS3 transition) from animating when different media queries take effect?

Question

Preface

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

1. Navigation is fully visible in a normal browser window, laid out horizontally.
2. Navigation becomes a toggleable vertical menu for mobile devices and small screens, which animates between its "opened" and "closed" state.

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.

My Problem

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.

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.

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

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

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?

Answer 1

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

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. If you don't want the transition to happen even after the user has opened the menu and then resized the window again, you could use Modernizr's mq method:

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

Answer 2

Referring to the side effect that Giona mentioned:

P.S. If you don't want the transition to happen even after the user has opened the menu and then resized the window again (...)

there is a cleaner way to fix this without firing on each resize event. You can remove the class resposible for transition after the transition end (full demo here):

$(function()
  {
    $(".nav").on("transitionend", function() {
        $(this).removeClass("activated");
    });
  }
)();

Answer 3

By combining answers from Giona and Janusz Kacalak (and Justin Bull's comment), we can further optimize the code so that the nav bar will never animate from an opened to closed state (not just for the first time, which is what Giona's code does).

function toggle() {
  var navbar = $(".nav");
  if (navbar.hasClass("active")) {
    // Closing the nav bar.
    navbar.removeClass("active");
    // Listening for a transition.
    // Use `.one` here because we only want this to be called once.
    navbar.one(whichTransitionEvent(), function() {
      // Remove animation property after the nav bar is closed.
      navbar.removeClass("activated");
    });
  } else {
    // Opening the nav bar.
    navbar.addClass("activated").addClass("active");
  }
}

// Ref: https://davidwalsh.name/css-animation-callback
function whichTransitionEvent() {
  var t;
  var el = document.createElement('fakeelement');
  var transitions = {
    'transition': 'transitionend',
    'OTransition': 'oTransitionEnd',
    'MozTransition': 'transitionend',
    'WebkitTransition': 'webkitTransitionEnd'
  };

  for (t in transitions) {
    if (el.style[t] !== undefined) {
      return transitions[t];
    }
  }
}

body { margin: 0; }
.toggle { display: none; }
.nav { list-style-type: none; margin: 0; padding: 0; }
.nav li { float: left; margin: 0; padding: 20px; background: #fdd; }
.nav li:nth-child(2n) { background: #dfd; }

@media only screen and (max-width: 599px)
{
    .toggle {
        display: block;
        position: relative;
        z-index: 2;
        padding: 20px;
        background: #eee;
    }
    .nav li {
        display: block;
        float: none;
    }
    .nav {
        display: block;
        position: relative;
        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;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#" class="toggle" onclick="javascript:toggle();return false;">Toggle menu</a>
<ul class="nav">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>