精简版
当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; }
解决方法
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。