CSS transition not triggered on window resize

Question

So I have this site built out, with a navigation bar at the top. I wanted it to be responsive, so I added a media query to hide the navigation items when the window gets narrow. Then a little "menu" button appears instead, and when you press it, it reveals the navigation. Here's a simplified version of it on jsfiddle: http://jsfiddle.net/cwgx2865/1/. Resize the window to see what happens when it gets small enough.

Now I wanted to animate that dropdown of the menu. So I just added a css transition code, and the menu animates quite nicely: http://jsfiddle.net/cwgx2865/2.

Now the problem I've run into, is that when you resize the window, the margin-top of the nav changes, triggering the animation. So when you have it wide and then resize it to narrow, the navigation jumps down and then animates back up. You can see that in the second demo above.

Is there an easy way I can avoid this problem? I don't want to re-design how the navigation works, I would rather just not have an animation. Here's the code from the demo:

CSS

.content {
    margin-top: -16px;
}

nav {
    background-color: #999;
}

ul {
    list-style: none;
    padding: 5px;    
}

ul li {
    display: inline-block;
    border: 1px solid #333;
    padding: 2px;
}

span.menu {
    display: none;
}

@media (max-width: 500px) {
    nav {
        margin-top: -230px;
    }

    nav ul li {
        display: inherit;
        list-style: inherit;
    }

    span.menu {
        display: block; 
        cursor: pointer;
        padding: 6px; 
    }

    nav.expanded {
      margin-top: 0;  
    } 
}

HTML

<div class="content">
    <nav>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
        </ul>
        <span class="menu">Menu</span>
    </nav>
    <p>Content ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh. Praesent sagittis turpis sit amet magna pulvinar pulvinar. Sed a aliquet purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris volutpat massa ac cursus faucibus. Phasellus ultricies pellentesque varius. Sed sed placerat nisl. Nullam fermentum dolor eget elit sodales tristique a vel arcu. Donec ultrices, elit in vestibulum fermentum, arcu sapien facilisis neque, non hendrerit leo massa vel nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam lacus lacus, venenatis in diam et, vehicula elementum metus. Donec congue mi sed sapien elementum, ut ornare elit congue.</p>
</div>

And a touch of jQuery to add the new class to the nav when the menu button is clicked:

$('.menu').on('click', function(){
    $('nav').toggleClass('expanded');
});

Answer 1

Here http://jsfiddle.net/cwgx2865/5/

Basically add the animation only on the nav when the nav is mobile. Adding the class via javascript forces the transition to really be ignored because the switch essentially happens at the same time. The animations are still css.

Add:

$(document).ready(function(){
   window.onresize = resizePage; 
   resizePage();
});
function resizePage(){
    var width = (window.innerWidth > 0) ? window.innerWidth : document.documentElement.clientWidth;
    if(width > 500){
        $('nav').removeClass('mobile');   
    } else {
        $('nav').addClass('mobile');   
    }
}

Then CSS

 nav {
     margin-top: -230px;
 }
 nav.mobile{
     transition: margin-top 0.5s ease;
 }

Answer 2

You can move transition: margin-top 0.5s ease; from .nav to .expanded. However this means that it will jump up instead of easing up. however it will still ease down.

http://jsfiddle.net/cwgx2865/4/