Question

简短版

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

Answer 1

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

如果你真的需要使用ng-repeat显示大量行，那么我建议你去：
分页
2.使用limitTo过滤器进行无限滚动。

你可以在这里查看参考：
https://stackoverflow.com/a/17350875/5052704

希望这会有所帮助!!

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

1 个答案: