Angular 2 の ngIf ディレクティブで CSS トランジションとアニメーションを使用する方法

Angular 2 ngIf と CSS Transition/Animation

Angular 2 の ngIf ディレクティブは、通常、指定された式に基づいて要素を条件付きでレンダリングするために使用されます。ただし、これらの要素で CSS トランジションまたはアニメーションを使用すると、予期しない動作が発生する可能性があります。

次のコード スニペットを検討してください。

// ...
<div class="note" [ngClass]="{'transition':show}" *ngIf="show">
  <p> Notes</p>
</div>
// ...

この例では、div 要素の目標は、 show が true に設定されている場合、CSS を使用して右からスライドインします。 *ngIf ディレクティブは、show が true の場合にのみ要素がレンダリングされることを保証しますが、show が false の場合、要素は DOM から完全に削除されます。

この問題は、CSS アニメーションまたはトランジションがターゲット要素に必要とするために発生します。アニメーションの継続中は DOM 内に存在します。 show が false の場合、*ngIf は要素を削除するため、CSS で定義されたトランジションは有効になりません。

解決策:

この問題に対処するには、次のことをお勧めします。アニメーション化する必要がある要素を非表示にするために、ngIf の代わりに [hidden] 属性を使用します。

// ...
<div class="note" [ngClass]="{'transition':show}" [hidden]="!show">
  <p> Notes</p>
</div>
// ...

[hidden] を使用すると、要素は DOM 内に残りますが、その可視性は「非表示」に設定されます。 show が false の場合。これにより、要素を CSS アニメーションまたはトランジションに適用できるようになります。

以上がAngular 2 の ngIf ディレクティブで CSS トランジションとアニメーションを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。