有効にする前の遷移を解決する

Question

Durandalの遷移を使用して古いビューをただちにフェードアウトする簡単な方法はありますか？そして、activate関数が解決したら新しいものをフェードインさせますか？ここで

は、いくつかの状況です：

私はビューのほとんどは、機能を有効デュランダル1.2 SPAを持ってサービス呼び出しを行うと、適切な約束を返します。これはすべて機能しますが、読み込みが完了したときにのみ遷移が実行されることがあります。サービスが応答するまでに数秒かかる場合があります。リンクをクリックしたときのユーザーエクスペリエンスが低下し、何か目立つことが起こるまでに数秒かかります。

解決策は、（有効になる前に）すぐに古いビューをアニメーション化して、アクティブ化が完了したときに新しいビューでアニメートすることです。現時点では、アニメーション表示はすべてルートに対応しており、変更が必要ではありません。私が思い付くし、そのすべての作業数のソリューションをテストしたが、理想的とは言えないようだ（とデュランダルの移行フレームワークを活用していない）しました：

• 手動で（その非アクティブ化ですべてのビューを離れアニメーション）と戻ってそれをアニメーションそのviewAttached（）
• バインドrouter.isNavigatingに.PAGEホストのdivの可視性ビア内（遷移を処理するためにカスタムバインディングを使用してこのようなノックアウトサイトからfadeVisible例として）
• 手動router.isNavigatingに加入し、変更時にカスタムロジックを実行する

私はそれらを試しましたが、これまでのところ私は.page-host divのカスタムバインディングがベストですが、これはコードの量が最小限で済むためです。しかし、私の特定の状況のた​​めに私のケースでしか動作しません。ジェネリックソリューション。

これは、Durandalのトランジションが作成されたものとまったく同じようです。トランジションを使ってDurandalでこれを行うもっとエレガントな方法がありますか（1.2または今後のリリースで）？

私はthis questionを見ましたが、これは類似しているようですが、少し具体的ではなく、関連する回答はありません。

Answer 1

アクティブでない非同期ロジックを移動し、viewAttachedに配置します。これにより、ビューはすぐにアニメーション化されます。次に、viewAttachedから、バインディングがすでに適用されているため、KOを破棄せずに非同期コードを実行することは安全です。 （注意：viewAttachedはattachedToParentに2.0に変更されます。）

Answer 2

をあなたは「ルータ活性化：ルート」のためのハンドラを追加することができ、あなたのshell.jsに次のコードを追加してイベント：

router.on('router:route:activating').then(function() { 
    //fade out animation goes here; 
    //Usually that is changing of observable which will add/remove css class for your view (or shows loading overlay) 
    //Animation of view transition could be done by add class css3 animation. 
}); 

そして、もし場合私は渡されたのコンテキストパラメータに頼ってるので、私はちょうどその試みが、残念ながらその仕事を与えた

if (context.bindingContext.$data && context.bindingContext.$data.isLoading && ko.isObservable(context.bindingContext.$data.isLoading)) { 
    composition.current.complete(function() { 
    context.bindingContext.$data.isLoading (true); 
    }); 
}