能夠繪製NG-顯示/ NG隱藏在角1.4.8？

Question

我目前動畫我的NG-進入，NG-留給我的NG-重複，但如何爲NG-顯示/隱藏？也有類嗎？

Answer 1

ng-hide和ng-show的等價類是.ng-hide-add和.ng-hide-remove。此外，您還可以使用.ng-hide-add-active和.ng-hide-remove-active如果你想separatedely設置樣式和控制的國家。

根據Angularjs針對ngHide和ngShow的文檔，您可以在處於活動狀態時使用相同類生成動畫，以使用相應事件（添加或刪除）生成動畫。

下面的示例實現使用該功能的簡單fade-infade-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>