[英]Animation on ng-show/ng-hide in angular
我對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"> </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']);
有沒有實現這些動畫的方法,最有效的方法是什么?
我希望對答案做出一些解釋,以便我可以完全理解此問題。
確保在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']);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.