AngularJS - 在 ng-click 上向下滑动菜单答案

【问题标题】：AngularJS - Sliding down menu on ng-clickAngularJS - 在 ng-click 上向下滑动菜单
【发布时间】：2014-11-08 16:06:12
【问题描述】：

我有一个菜单按钮，在 ng-click 上用于显示和隐藏。我如何调整这一点，以便在 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

【问题讨论】：

标签： angularjs css angularjs-scope ng-class

【解决方案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

【讨论】：