angularjs – 确保在转换之前完成DOM更改

当ui-router转换到新视图时(以某种我不完全理解的方式使用ngAnimate),它会将ng-leave和ng-leave-active类添加到当前视图中.它还将ng-enter和ng-enter-active类添加到下一个视图中.问题是转换是在下一个视图中的所有DOM更改完成之前开始的,从而导致转换不稳定.所以我的问题是;是否可以防止添加ng-enter和ng-enter-active类,直到我决定添加它们(通过从控制器发送事件等)？

长版

我正在开发一个AngularJS应用程序,它使用ui-router和ng-animate进行转换.我遇到了一个小的性能问题,我真的想解决它,使应用程序运行更顺畅.

状态之间的转换似乎是口吃,我发现这可能是因为在过渡期间,Angular正在进行转换过程中进行DOM更改.

在进行转换之前,如何确保下一个视图中的DOM更改已完成？我正在使用ui-router的resolve函数和promise,以防止在加载数据之前发生转换.

我创建了一个说明我问题的JSFiddle.单击链接以输入state2时,解析行需要一段时间才能解析数据(正如预期的那样).但是,在转换发生时似乎没有准备好DOM,因为转换可能非常滞后.这让我觉得在转换发生时DOM还没有准备好.

app.js

angular.module('myApp',['ui.router','ngAnimate'])
.config(['$stateProvider',function ($stateProvider) {
        $stateProvider
            .state('state1',{
                url: '',views: {
                    'main': {
                        templateUrl: "state1.html",controller: function(){

                        }
                    }
                }
            })
            .state('state2',{
                url: '/state2',views: {
                    'main': {
                        templateUrl: "state2.html",controller: function($scope,rows){
                            $scope.rows = rows;
                        },resolve: {
                            rows: function($q){
                                var rows = [];
                                var deferred = $q.defer();

                                for (var i = 0; i < 10000; i++){
                                    rows.push({a: i,b: i/2,c: 3*i/2});
                                }

                                deferred.resolve(rows);

                                return deferred.promise;
                            }
                        }
                    }
                }
            });
    }])

模板

<div ui-view="main" class="main"></div>

<script type="text/ng-template" id="state1.html">
    <a ui-sref="state2">Go to state 2</a>
</script>

<script type="text/ng-template" id="state2.html">
    <a ui-sref="state1">Back to state 1</a>

    <table>
        <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
        </tr>
        <tr ng-repeat="row in rows">
            <td>{{row.a}}</td>
            <td>{{row.b}}</td>
            <td>{{row.c}}</td>
        </tr>
    </table>
</script>

CSS

.main{
    transition: all 1s ease;
    position: absolute;
    width: 100%;
}

.main.ng-enter{
    transform: translateX(30%);
    opacity: 0;
}

.main.ng-enter.ng-enter-active{
    transform: translateX(0);
    opacity: 1;
}

.main.ng-leave{
    transform: translateX(0);
    opacity: 1;
}

.main.ng-leave.ng-leave-active{
    transform: translateX(-30%);
    opacity: 0;
}