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

短版

当ui router转换到新视图时（以某种我不完全理解的方式使用ngAnimate），它会将类

ng leave

和

ng leave active

添加到当前视图中。它还将类

ng enter

和

ng enter active

添加到下一个视图中。问题在于，转换是在下一个视图中的所有DOM更改完成之前启动的，这导致了转换的不稳定。所以我的问题是,；是否可以防止添加

ng enter

和

ng enter active

类，直到我决定添加它们为止（通过从控制器发送事件或类似方式）

长版本

我正在开发一个AngularJS应用程序，它使用ui路由器和ng动画进行转换。我遇到了一个小的性能问题，我真的很想解决这个问题，以使应用程序运行更平稳

状态之间的转换似乎是断断续续的，我发现这可能是因为在转换期间，Angular正在执行DOM更改，而转换正在进行

如何确保在进行转换之前完成下一个视图中的DOM更改？我正在使用ui路由器的解析功能，并承诺在加载数据之前防止转换发生

我创造了一个例子来说明我的问题。单击链接以输入state2时，解析行需要一段时间才能用数据解析（正如预期的那样）。然而，当转换发生时，DOM似乎还没有准备好，因为转换可能会非常滞后。这让我觉得DOM在转换发生时还没有准备好

app.js

---

问题是

ng repeat

。它为每个元素创建一个手表，因此随着元素数量的增加，性能会下降。超过2000-3000个元素肯定会影响

ng repeat

的性能

如果您确实需要使用ng repeat显示大量行，那么我建议您选择：
1.分页
2.使用

limito

过滤器进行无限滚动

您可以在此处查找参考：

---

希望这有帮助

是我在取消了github问题后得到的。我觉得使用feat（$animate）可以通过暗示关闭回调来解决这个问题。您介意按照链接中的建议尝试吗？一旦我有时间，我会尝试用它来构建plunker。

嘿，安东，你能更具体地描述一下你的元素和发生的时间吗？也许一些代码会有帮助！嗨@bobleujr！我已经用代码和到JSFIDLE的链接更新了我的问题！我用我的问题的简短版本再次更新了问题！我没有什么解决办法，只是想看看你已经想出了什么。监听转换事件+ng（如果是一个）。另一个是事件。ng重复和元素数量不是主要问题。我不希望它在DOM完成更改之前启动转换。而且内容是如何创建的也不重要。我可以让我的控制器在DOM准备好的时候广播一个事件，但我需要nganimate在我说它应该这样做之前，不要添加ng enter active类，这样看起来它可能是什么，必须深入研究它！

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>

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