jquery - 窗口调整大小时未触发 CSS 过渡

Question

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

现在我想为菜单的下拉菜单设置动画。所以我只是添加了一个 css 转换代码，菜单动画效果非常好:http://jsfiddle.net/cwgx2865/2 .

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

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

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>

点击菜单按钮时，使用 jQuery 将新类添加到导航栏中:

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

Answer 1

在这里http://jsfiddle.net/cwgx2865/5/

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

添加:

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

然后是 CSS

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