javascript - AngularJS 动画(显示/隐藏)速度

Question

我在我的 Angular 页面上创建了一个显示/隐藏动画。

我使用了标准的 angular-animate.js 库，并与 animate.css 搭配使用。 AngularJS 核心是 v1.2.20。一切工作正常，我已经多次使用它。

当调用显示/隐藏函数时，会在从“显示”状态转换为“隐藏”状态时添加各种类，因此您可以创建一些漂亮的 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>

 

以及某些 Controller 中的切换逻辑:

$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