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

AngularJS animation (show/hide) speed

本文关键字：隐藏 速度 显示 动画 AngularJS      更新时间：2023-09-26

我在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;
}

您可能想看看转换，AngularJS文档有一个例子：

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

正如你可能想象的那样，它描述了一个持续0.5秒的过渡。

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

相关文章：