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

AngularJS动画（显示/隐藏）速度

1 个答案: