我对角度js中的动画有疑问
在我的html文件中,我创建了一个列表,其中包含一个bootstrap list-group,如下所示:
的 HTML
<ul class="sidebar-bottom-list">
<li>
<a href="#/dossier/" class="active" ng-click="showSubmenu = ! showSubmenu"><span class="glyphicon glyphicon-folder-open"> </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;
}
也许我需要一些其他角度模块,这些是我现在在main.js中加载的模块:
的 main.js
var app = angular.module("program", ['ngRoute','mobile-angular-ui.core','mobile-angular-ui.components']);
有没有办法实现这些动画,最有效的方法是什么?
我很感激答案的一些解释,所以我可以完全理解这个问题。
答案 0 :(得分:1)
确保在index.html或其他任何内容中包括ng-animate脚本。
在main.js中,您需要添加ng-animate模块。
<强> main.js 强>
var app = angular.module("program", ['ngRoute','mobile-angular-ui.core','mobile-angular-ui.components', 'ngAnimate']);