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

Question

简短版本

当 ui-router 转换到新 View 时(以我不完全理解的方式使用 ngAnimate)，它会添加类 ng-leave 和 ng-leave-active 到当前 View 。它还将类 ng-enter 和 ng-enter-active 添加到下一个 View 。问题在于，在下一个 View 中的所有 DOM 更改完成之前就开始转换，导致转换不稳定。所以我的问题是；是否可以阻止添加 ng-enter 和 ng-enter-active 类，直到我决定应该添加它们(通过从 Controller 传输事件，或类似的)？

长版

我正在开发一个 AngularJS 应用程序，它使用 ui-router 和 ng-animate 进行过渡。我遇到了一个小的性能问题，我真的很想解决这个问题以使应用程序运行更流畅。

状态之间的转换似乎很卡顿，我发现这可能是因为在转换期间 Angular 在转换发生的同时执行 DOM 更改。

如何确保在进行转换之前下一个 View 中的 DOM 更改已完成？我将 ui-router 的解析函数与 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 过滤器无限滚动。

您可以在这里查看引用:
https://stackoverflow.com/a/17350875/5052704

希望这有帮助!!