CSS 转换未在 window 调整大小时触发

Question

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

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

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

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

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 以在单击菜单按钮时将新的 class 添加到导航栏：

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

Answer 1

您可以将 transition: margin-top 0.5s ease; 从 .nav 移动到 .expanded。然而，这意味着它会跳起来而不是缓和。但是它仍然会缓和。

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

Answer 2

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

基本上只在导航移动时在导航上添加动画。通过 javascript 添加 class 会强制真正忽略转换，因为转换基本上是同时发生的。动画还是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;
 }

CSS 转换未在 window 调整大小时触发

CSS transition not triggered on window resize

html

css

jquery

css-transitions