ショートバージョンは、DOMの変更が（私は完全には理解していない何らかの方法でngAnimateを使用して）新しいビューへの移行
UI-ルータ移行する前に終了していることを確認し、それがクラスng-leaveとng-leave-activeを追加します現在のビューに移動します。また、次のビューにクラスng-enterとng-enter-activeを追加します。問題は、次のビューのすべてのDOM変更が終了する前に遷移が開始され、遷移が不安定になることです。だから私の質問です。コントローラからイベントを送信するなどして追加することを決定するまで、ng-enterおよびng-enter-activeクラスが追加されないようにすることは可能ですか？
ロングバージョン
私が遷移するためのUI-ルータとNG-アニメーションを使用していますAngularJSアプリケーションを開発しています。私は小さなパフォーマンスの問題に遭遇しました。私は本当にアプリケーションをよりスムーズに動かすために解決したいと思います。状態間の
移行が吃音ているように見える、と遷移が行われている間の移行時に角度がDOM-変更を実行しているので、私はこれはおそらくであることが判明しました。
移行を行う前に、次のビューでDOMの変更が完了していることを確認するにはどうすればよいですか？私はui-routerの解決機能を、データがロードされる前に遷移が起こらないようにする約束と共に使用しています。
私の問題を示す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;
}
こんにちはAnton、あなたの要素について少し具体的にできますか？多分いくつかのコードが助けになるでしょう！ – bobleujr
こんにちは@bobleujr！私は両方のコードでJSFiddleへのリンクを私の質問を更新しました！ –
問題の短いバージョンでもう一度質問を更新しました！ –