Angular 2 で CSS トランジションを ngIf で機能させるにはどうすればよいですか?

Angular 2 の ngIf と CSS トランジション/アニメーション

質問:

Angular で div を表示するために ngIf を利用する場合2、要素が初期状態の場合、CSS トランジションが機能しないのはなぜですかhidden?

答え:

ngIf は、条件が false になったときに DOM から要素を削除します。ただし、存在しない要素にトランジションを適用することはできません。

解決策:

スムーズなトランジションを実現するには、[ngIf] の代わりに [hidden] を使用します:

<code class="typescript"><div class="note" [ngClass]="{'transition':show}" [hidden]="!show"></code>

このようにすると、要素は DOM に残り、show プロパティのときにトランジションを適用できます。

Angular アニメーションによるソリューションの更新

Angular 4.1.0 および 2.1.0 では、Angular アニメーションにより、ngIf で遷移を実現するための改善された方法が提供されます。

Angular 4.1.0 とその後:

<code class="typescript">trigger('enterAnimation', [
  transition(':enter', [
    style({transform: 'translateX(100%)', opacity: 0}),
    animate('500ms', style({transform: 'translateX(0)', opacity: 1}))
  ]),
  transition(':leave', [
    style({transform: 'translateX(0)', opacity: 1}),
    animate('500ms', style({transform: 'translateX(100%)', opacity: 0}))
  ])
])</code>

Angular 2.1.0:

このアプローチでは、2.1.0 で導入された animate() ヘルパーを使用します。詳細については、Angular アニメーションのドキュメントを参照してください。

以上がAngular 2 で CSS トランジションを ngIf で機能させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。