ng-show/ng-hide 动画

Question

我对 Angular js 中的动画有疑问。
在我的 html 文件中，我创建了一个列表，其中包含一个引导列表组，如下所示：

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>

如果满足 showSubmenu 语句，这将显示和隐藏。 我喜欢使用上下滑动的过渡来显示和隐藏 div。
我设法在 css 文件中做到了这一点：

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

也许我需要一些其他的 Angular 模块，这些是我现在在 main.js 中加载的模块：

ma​​in.js

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

有没有办法实现这些动画，最有效的方法是什么？
我会很感激答案的一些解释，以便我能完全理解这个问题。

Answer 1

确保在您的 index.html 或您包含 ng-animate 脚本的任何内容中。

在 main.js 中你需要添加 ng-animate 模块。

ma​​in.js

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