Angular 2 で ngIf によって制御される要素をアニメーション化するには?

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

この質問は、ngIf によって操作される要素で CSS トランジションまたはアニメーションを実行する際の課題を詳しく掘り下げます。 Angular 2 のディレクティブ。

Issue

目標は、CSS を使用して右からの要素の入り口をアニメーション化することです。ただし、最初に要素を非表示にするために ngIf を使用すると、遷移はトリガーされません。

解決策

重要な問題は ngIf の動作にあります。 ngIf に関連付けられた式が false になると、要素は DOM から削除されます。トランジションとアニメーションでは要素が DOM に存在する必要があるため、レンダリングされていない要素にトランジションとアニメーションを適用しても機能しません。

この問題に対処するには、ngIf の代わりに hidden を使用して、

更新されたソリューション (Angular 4.1.0 以降)

Angular 4.1.0 以降のバージョンでは、Angular アニメーションを使用することが推奨されます。アニメーションを使用した更新されたソリューションは次のとおりです。

<code class="typescript">import { trigger, style, animate, transition } from '@angular/animations';

// ...

@Component({
  animations: [
    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 }))
        ])
      ]
    )
  ]
})

// ...

<div *ngIf="show" [@enterAnimation]></div></code>

このソリューションは、「enterAnimation」というコンポーネントにトリガーを追加し、開始状態と終了状態の両方の遷移を定義します。トランジションには、変換と不透明度のスタイルが含まれており、アニメーションで要素を右側からスライドインできます。

このソリューションは Angular 4.1.0 以降に適用できることを覚えておいてください。古いバージョンの場合は、引き続き非表示を使用することが推奨されるアプローチです。

以上がAngular 2 で ngIf によって制御される要素をアニメーション化するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。