Jquery 调整窗口大小时未触发CSS转换

所以我建立了这个网站，顶部有一个导航栏。我希望它能够响应，所以我添加了一个媒体查询，以便在窗口变窄时隐藏导航项。然后会出现一个小的“菜单”按钮，当你按下它时，它会显示导航。下面是它在JSFIDLE上的简化版本：。调整窗口大小，以查看当窗口足够小时会发生什么

现在我想给下拉菜单设置动画。所以我刚刚添加了一个css转换代码，菜单的动画效果非常好：

现在我遇到的问题是，当你调整窗口大小时，导航顶部的边距会改变，从而触发动画。因此，当您将其设置为宽，然后将其调整为窄时，导航将向下跳转，然后重新设置动画。您可以在上面的第二个演示中看到这一点

有没有一种简单的方法可以避免这个问题？我不想重新设计导航的工作方式，我宁愿不要动画。以下是演示中的代码：

CSS

HTML

---

您可以移动

过渡：边距上限0.5s从
.nav
到
.expanded
。然而，这意味着它将跳起来，而不是放松。然而，它仍然会缓和下来

这里

基本上只在导航移动时在导航上添加动画。通过javascript添加类会强制忽略转换，因为转换基本上是同时发生的。动画仍然是css

加：

然后CSS

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

你能用JS来解决吗？还是必须是CSS？我更喜欢CSS，但是如果不可能的话，我会考虑JS@ Leeishhow吗？我真的不喜欢那种方法。。。我希望整个面板从顶部滑入。如果你打开和关闭菜单，然后返回更广泛的完整导航，列表项就会消失。如果你让菜单保持打开状态，然后加宽窗口，菜单将保持打开状态。我发现当我实现这一点时，动画在我的iPhone上不起作用。我想也许宽度检查不起作用？我不太确定。所以我给了nav一个手机类的开始。因此，即使不能添加mobile类，它也可以在我的手机上使用。这是一种可以接受的方式吗？你能想到这会导致什么问题吗？你做CSS的方式与我做的和我通常看到的是相反的。我通常使我的风格移动，并使用最小宽度覆盖更大屏幕的移动风格。因此，当我往下看我的CSS时，我会看到越来越大的屏幕大小样式。无论如何，调用resizepage函数强制其在页面加载时进行检查。我将编辑我的答案。如果您手动添加它，您就是在告诉桌面浏览器使用mobile类。也许现在不是问题，但不是个好主意。
<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>

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

$(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');   
    }
}

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