AngularJS動畫（顯示/隱藏）速度

Question

我在我的Angular頁面上創建了一個顯示/隱藏動畫。

我已經使用了標準的angular-animate.js庫，與animate.css配對。 AngularJS的核心是v1.2.20。一切工作正常，我在數次使用它。

當show/hide函數被調用時，所有類都會在從'show'轉換到'hide'狀態時被添加，所以你可以創建一些漂亮的css動畫。問題是，你怎麼能夠加速這個'增加/移除過渡類'（或減慢速度）？

---

如果有人想知道我用什麼代碼：

我的指令HTML：

<div class="datepicker-panel panel panel-square panel-no-border panel-default m-md ng-hide animated" 
    ng-show="datepicker.show" 
    ng-class="{'fadeIn':datepicker.show, 'fadeOut':!datepicker.show}" 
    ng-controller="DatePicker"> 
    <!-- Some HTML --> 
</div> 

 

具有以下切換按鈕配對：

<div class="datepicker-button" ng-click="datepicker.toggle()"> 
</div> 

 

而且在某些控制器切換邏輯：

$scope.datepicker = { 'show' : false }; 

$scope.datepicker.toggle = function() { 
    this.show = !this.show; 
} 

Answer 1

你可能想看看在過渡中，AngularJS文檔有一個例子：

.sample-show-hide { 
    -webkit-transition:all linear 0.5s; 
    transition:all linear 0.5s; 
} 

正如你可能會想象描述了持續0.5秒的過渡。

https://docs.angularjs.org/guide/animations