ole*_*ank 5 animation angularjs
从Angular 1.2 - > 1.4更新后,我遇到动画问题.
我通过更改视图容器元素上的css类来设置页面过渡的动画.我使用ui-router并在元素上使用ng-class指令.用户使用箭头键(app.run()中的事件侦听器)进行导航.这将类设置为$ rootScope上的字符串变量'navDirection'(左/右).
更新后,似乎在动画之后设置了$ rootScope.navDirection.因此,当用户改变方向时动画是错误的.
任何建议和/或评论表示赞赏!
的index.html
<body ng-cloak ng-keydown="handleEvt($event)">
<div class="page-wrapper page-wrapper--constrain" ng-class="{'page-wrapper--decorate' : decoratePageContent === true}">
<div class="page-content group position-context">
<div ui-view class="slide" ng-class="{'at-view-slide-in-left at-view-slide-out-right': navDirection == 'right', 'at-view-slide-in-right at-view-slide-out-left': navDirection == 'left'}"></div>
</div>
</div>
</body>
app.js
var app = angular.module('my-app', [
'ui.router',
'ngAnimate'
]);
// ...
app.run(function ($rootScope, navigationService) {
$rootScope.handleEvt = function(e) {
if ($rootScope.navVisible) {
switch (e.which) {
// right
case 37:
$rootScope.navDirection = "right";
navigationService.navigate(navigationService.getCurrentPageIndex() - 1);
break;
// left
case 39:
$rootScope.navDirection = "left";
navigationService.navigate(navigationService.getCurrentPageIndex() + 1);
break;
}
}
};
// ...
小智 0
ngAnimate 在 1.4 版本中进行了内部重构。它不会同时运行 Javascript 和 CSS 动画。现在可以通过将 $animateCSS 注入 javascript 定义的动画来实现相同的效果。触发移动动画将始终结束任何挂起或活动的基于父类的动画（使用 ngClass）。
| 归档时间： |
|
| 查看次数： |
399 次 |
| 最近记录： |