AngularJS - Sliding down menu on ng-click

Question

I have a menu button that on ng-click used to show and hide. How can i adapt this so that on ng-click the menu slides down and up on close?

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

Here's a link to a plunker: http://plnkr.co/edit/NvWW0x2d8NPNJAIfDN5F

Answer 1

To get CSS animations working, you need to drop ng-show/ng-hide on the animated element and do everything with CSS classes. Here is an example of what I did, it's still not finished because you have some complex stuff there, but hopefully it's enough to get you started:

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

See it live here: http://plnkr.co/edit/TK5hX3MXPHBnIwVDNifK?p=preview

---

Animating margins instead of height here: http://plnkr.co/edit/VMdUALUbhqIpOPfNGDyU?p=preview