1
我目前動畫我的NG-進入,NG-留給我的NG-重複,但如何爲NG-顯示/隱藏?也有類嗎?能夠繪製NG-顯示/ NG隱藏在角1.4.8?
我目前動畫我的NG-進入,NG-留給我的NG-重複,但如何爲NG-顯示/隱藏?也有類嗎?能夠繪製NG-顯示/ NG隱藏在角1.4.8?
ng-hide
和ng-show
的等價類是.ng-hide-add
和.ng-hide-remove
。此外,您還可以使用.ng-hide-add-active
和.ng-hide-remove-active
如果你想separatedely設置樣式和控制的國家。
根據Angularjs針對ngHide和ngShow的文檔,您可以在處於活動狀態時使用相同類生成動畫,以使用相應事件(添加或刪除)生成動畫。
下面的示例實現使用該功能的簡單fade-in
fade-out
按鈕。
觀察確保包括
angular-animate.js
索引頁面中,也可以添加ngAnimate
模塊依賴你的主模塊(或子如果它是一個獨立的模塊中,LIB,等上一個指令),如下所示:angular.module('myApp', ['ngAnimate']);
angular.module('myApp', ['ngAnimate'])
.controller('myController', function ($scope, $interval) {
$scope.show = true;
$interval(function() { $scope.show = !$scope.show; }, 1000);
});
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
.my-element.ng-hide{
opacity: 0;
}
.my-element.ng-hide-add,
.my-element.ng-hide-remove {
/*
setup animations
mess up with the properties, etc
*/
transition: all linear 1s;
}
.my-element.ng-hide-add-active,
.my-element.ng-hide-remove-active {
/* set state during transitions */
display: inline-block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="http://code.angularjs.org/1.4.3/angular-animate.min.js"></script>
<div ng-controller="myController"><pre>show: {{ show }}</pre>
<button class="my-element" ng-show="show">show</button>
</div>