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