ng-show / ng-hide中的动画以角度显示

Question

I have a question about animations in angular js.
In my html file I have created a list with a bootstrap list-group inside it like this:

HTML

<ul class="sidebar-bottom-list">
<li>
    <a href="#/dossier/" class="active" ng-click="showSubmenu = ! showSubmenu"><span class="glyphicon glyphicon-folder-open">&nbsp;</span>Dossiers</a>
    <div class="list-group narrow-list-group no-padding-bottom slider-top-bottom" ng-show="showSubmenu">
        <a href="#" class="list-group-item active">lijst</a>
        <a href="#" class="list-group-item">algemeen</a>
        <a href="#" class="list-group-item">partijen</a>
        <a href="#" class="list-group-item">documenten</a>
        <a href="#" class="list-group-item">notas</a>
        <a href="#" class="list-group-item">royementen</a>
        <a href="#" class="list-group-item">urenregistratie</a>
        <a href="#" class="list-group-item">voortgang</a>
    </div>
</li>

This shows and hides as it should if the showSubmenu statement is met. I like to show and hide the div using a transition in which it swipes up and down.
I managed to make this in the css file:

CSS

.list-group-item {
    color: grey !important;
    border: none !important;
    border-radius: 0px !important;
}
.list-group-item:hover {
    color: #000 !important;
    background: #ccc !important;
}
.slider-top-bottom.ng-hide-add.ng-hide-add-active,
.slider-top-bottom.ng-hide-remove.ng-hide-remove-active {
  -webkit-transition: all linear 0.5s;
  transition: all linear 0.5s;
}

Maybe I need some other module for angular, these are the ones I have loaded right now in the main.js:

main.js

var app = angular.module("program", ['ngRoute','mobile-angular-ui.core','mobile-angular-ui.components']);

Is there a way to implement these animations, and what would be the most efficient way of doing this?
I would appreciate some explanation with the answer so I can fully understand this problem.

Answer 1

Make sure in your index.html or whatever you are including the ng-animate scripts.

In main.js you need to add the ng-animate module.

main.js

var app = angular.module("program", ['ngRoute','mobile-angular-ui.core','mobile-angular-ui.components', 'ngAnimate']);