AngularJS - Sliding down menu on ng-click - angularjs

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>Desktop Site</li>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<div class="nav-slide"> Menu
</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