Question

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

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

现在我遇到的问题是，当你调整窗口大小时，导航的margin-top会改变，从而触发动画。所以当你把它放宽并然后调整它以缩小时，导航会跳下来然后动画回来。你可以在上面的第二个演示中看到它。

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

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;
 }

Answer 2

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

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

在窗口调整大小

2 个答案: