Question

我有一个菜单按钮，用于显示和隐藏ng-click。我如何调整这一点，以便在点击菜单时向下和向上滑动菜单？

HTML：

  <div class="nav">
<nav class="primary-nav" ng-show="showMenu" ng-class="{true: 'showMenu'}[showMenu]">
  <ul>
    <li><a href="someurl">Desktop Site</a></li>
    <li><a href="someurl">Link 1</a></li>
    <li><a href="someurl">Link 2</a></li>
    <li><a href="someurl">Link 3</a></li>
  </ul>
</nav>
<div class="nav-slide"> <a href="" ng-click="showMenu = !showMenu">Menu</a> 
</div>

CSS：

.nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

.primary-nav {
    width: 100%;
    background: #fff;
}
.primary-nav a { display: block; padding: 15px 8px; border-bottom: 1px solid #D1D1D1; color: #666666; font-weight: 700; }
.primary-nav li:last-child a { border-bottom: none; }
.nav-slide { 
    position: relative; 
    top: 0; 
    border-top: 4px solid #fff; 
    -webkit-box-shadow: 0px 5px 4px 0px #000;
    box-shadow: 0px 5px 4px 0px #000;
    z-index: 10;
}
.nav-slide a { 
    display: block; 
    width: 80px; 
    position: relative; 
    right: 10px;
    padding: 2px 0 8px 0; 
    float: right;
    text-align: center;
    color: #333;
    font-weight: 700;
    border-radius: 0 0 6px 6px;
    -webkit-box-shadow: 0px 5px 4px 0px #000;
    box-shadow: 0px 5px 4px 0px #000;
}
.nav-slide a.active { background-position: center -24px }

.showMenu {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

这是一个关于plunker的链接：http://plnkr.co/edit/NvWW0x2d8NPNJAIfDN5F

Answer 1

要使CSS动画有效，您需要在动画元素上删除ng-show / ng-hide并使用CSS类完成所有操作。这是我所做的一个例子，它仍然没有完成，因为你有一些复杂的东西，但希望它足以让你开始：

HTML

<nav class="primary-nav" ng-class="{true: 'showMenu'}[showMenu]">

CSS

.primary-nav {
    width: 100%;
    background: #fff;
    height: 0;
    transition: all 0.5s linear;
}
.primary-nav.showMenu {
  height: 150px;
}
.primary-nav li { display: none; }
.primary-nav.showMenu li { display: initial; }

在此处观看：http://plnkr.co/edit/TK5hX3MXPHBnIwVDNifK?p=preview

在此设置边距而不是高度：http://plnkr.co/edit/VMdUALUbhqIpOPfNGDyU?p=preview

AngularJS - 在ng-click上滑动菜单

1 个答案: