angularjs – Angular Animate 1.4太快了

发布时间：2020-12-17 18:04:18 所属栏目：安全来源：网络整理

导读：从Angular 1.2更新后我的动画有问题 – 1.4. 我通过更改视图容器元素上的css类来设置页面过渡动画. 我使用ui-router并在元素上使用ng-class指令. 用户使用箭头键(app.run()中的事件侦听器)进行导航.这将类设置为$rootScope上的字符串变量’navDirection'(左/

从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;
            }
        }
    };

// ...

解决方法

ngAnimate在1.4版本内部进行了重构.它不会同时运行Javascript和CSS动画.现在可以通过将$animateCSS注入javascript定义的动画来实现相同的效果. ???触发移动动画将始终结束任何待处理或活动的基于父类的动画(使用ngClass).

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!