AngularJS动画(显示/隐藏)速度
问题描述:
我在我的Angular页面上创建了一个显示/隐藏动画。AngularJS动画(显示/隐藏)速度
我已经使用了标准的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秒的过渡。
你其实是对的。我只是试着把过渡设置为5秒,而全班加入东西也花了5秒。从来没有意识到这是基于CSS的。谢谢。 – 2014-09-01 16:46:14