Angularの* ngIfにトランジションエフェクトを追加するにはどうすればよいですか？

Question

はあなたがまたはbにhtmlSegmentを設定すると、我々はtruthy値セグメントが生きていると消えてしまう他の来ることを知っている。component.html

<div *ngIf="htmlSegment == 'a" > 
    {{someMessage}} 
</div> 


<div *ngIf="htmlSegment == 'b" > 
    {{someMessage}} 
</div> 

に、このような2つのdivを持って言います問題はありません。

しかし、これらのセグメントの外観と消滅をいくつかの移行効果とともに生き生きとさせるにはどうすればよいでしょうか。フェードインやアウトなど

domが新しいhtmlSegmentで完了した後に移行が開始されることを確認できますか？ （これは、素晴らしいフェードインとフェードアウトを除いて、ユーザーが点滅やページジャークを経験しないようにするためのものです。）

Answer 1

このような感じですか？

span { 
    opacity: 0; 
    transition: opacity 1s; 
} 

.active span { 
    opacity: 1; 
} 

は、あなたのテンプレートで：

<div [ngClass]="(htmlSegment=='a')?'active':'not-active'" > 
    <span>{{someMessage}}</span> 
</div> 

<div [ngClass]="(htmlSegment=='b')?'active':'not-active'" > 
    <span>{{someMessage}}</span> 
</div> 

Answer 2

アニメーションモジュールは、あなたのHTML要素をアニメーション化しませんが、アニメーションは、特定のイベントに気づくとき、隠しまたはHTML要素の示すように、要素はいくつかの前を取得しますアニメーションの作成に使用できる定義済みのスタイル（またはクラス）。

プロジェクトにアニメーションモジュールを追加します。

import { 
    trigger, 
    state, 
    style, 
    animate, 
    transition 
} from '@angular/animations'; 

は、あなたのコンポーネントにアニメーションプロパティを追加します。

animations: [ 
    trigger('heroState', [ 
    state('a', style({ 
    backgroundColor: 'yellow', 
    opacity:0.5 
    })), 
    state('b', style({ 
    backgroundColor: 'black', 
    opacity:1 
    })), 
    transition('a => b', animate('100ms ease-in')), 
    transition('b => a', animate('100ms ease-out')) 
    ]) 
] 

トリガーがときherostate変更と呼ばれます。終わり

、あなたのHTMLコードは次のようになります。

<div *ngIf="htmlSegment == 'a" 
[@heroState]="a"> 
    {{someMessage}} 
</div> 

<div *ngIf="htmlSegment == 'b" 
[@heroState]="b" > 
    {{someMessage}} 
</div> 

私はこのコードのAngular2オンラインサンプルを作成することはできませんが、私は正確にアニメーションで起こるものを感知するためのAngularJSオンラインのサンプルを作成します（ため。アニメーションを変更するには、「NGA-フェード」や独自のクラスに「NGA-スライドダウン」クラスを変更することができます）

Check Online(AngularJS - check auto-run js at the right panel and click on change button)