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

Question

精简版

当UI路由器过渡到一个新的视图(在某些方面,我不完全了解使用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;
}

Answer 1

问题是ng-repeat。它为每个元素创建一个监视，因此随着元素数量的增加，性能会下降。超过2000-3000个元素肯定会影响ng-repeat.

如果您确实需要使用 ng-repeat 显示大量行，那么我建议您选择：
1.分页
2.使用limitTo过滤器无限滚动。

您可以在这里查看参考：
/sf/answers/1214561281/

希望这可以帮助！！