Bagaimana untuk Menggunakan Peralihan dan Animasi CSS dengan Arahan ngIf Sudut 2?

Angular 2 ngIf dan CSS Transition/Animation

Angular 2's ngIf direktif biasanya digunakan untuk memberikan unsur bersyarat berdasarkan ungkapan yang diberikan. Walau bagaimanapun, apabila menggunakan peralihan atau animasi CSS pada elemen ini, gelagat yang tidak dijangka mungkin berlaku.

Pertimbangkan coretan kod berikut:

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

Dalam contoh ini, matlamatnya adalah untuk elemen div untuk slaid masuk dari kanan menggunakan CSS apabila persembahan ditetapkan kepada benar. Arahan *ngIf memastikan bahawa elemen hanya dipaparkan apabila rancangan adalah benar, tetapi apabila rancangan adalah palsu, elemen itu dialih keluar sepenuhnya daripada DOM.

Isu timbul kerana animasi atau peralihan CSS memerlukan elemen sasaran untuk hadir dalam DOM untuk tempoh animasi. Memandangkan *ngIf mengalih keluar elemen apabila rancangan adalah palsu, sebarang peralihan yang ditakrifkan dalam CSS tidak akan berkuat kuasa.

Penyelesaian:

Untuk menangani isu ini, adalah disyorkan untuk menggunakan atribut [tersembunyi] dan bukannya ngIf untuk menyembunyikan elemen yang sepatutnya dianimasikan.

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

Dengan menggunakan [tersembunyi], elemen itu masih ada dalam DOM tetapi keterlihatannya ditetapkan kepada "tersembunyi" apabila rancangan itu palsu. Ini memastikan bahawa elemen tersedia untuk animasi atau peralihan CSS untuk digunakan.

Atas ialah kandungan terperinci Bagaimana untuk Menggunakan Peralihan dan Animasi CSS dengan Arahan ngIf Sudut 2?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!