ng-outletを使用してページ遷移をアニメートする

Question

ng-viewを使用しているように、ng-outletを使用してページ入力とページ終了トランジションを1.5角度でアニメートできますか？もしそうなら、どのように？

Answer 1

さて、うまく答えが提供されなければならないので、：

1）あなたは亭

2を使用してAngularJSのバージョンの角度、アニメイトでプルする必要がある）アプリのモジュールへの依存関係としてngAnimateを追加します。

3）次に

ng-outlet.ng-enter { 
    opacity: 0; 
    transition-duration: 1000ms; 
} 

ng-outlet.ng-enter-active { 
    opacity: 1; 
} 

ng-outlet.ng-leave { 
    opacity: 1; 
    transition-duration: 1000ms; 
} 

ng-outlet.ng-leave-active { 
    opacity: 0; 
} 

角度は、これらのアニメーションを検出及び/又は遷移しますを使用するいくつかのCSS3アニメーションやトランジションを書きますアニメーションやトランジションを行うためのイベントループにアクセスを提供します。これはChrome DevToolsのマークアップを見ることで確認できます。上記のCSSが存在する場合、ng-enter、ng-enter-activeなどがngOutletに適用されていることがわかります。それらが削除されると、イベントクラスはngOutletに適用されなくなります。