Bagaimana untuk Membuat Peralihan CSS Berfungsi dengan ngIf dalam Angular 2?

ngIf dan CSS Transition/Animation dalam Angular 2

Soalan:

Apabila menggunakan ngIf untuk memaparkan div dalam Angular 2, mengapakah peralihan CSS tidak akan berfungsi jika elemen pada mulanya disembunyikan?

Jawapan:

ngIf mengalih keluar elemen daripada DOM apabila keadaannya menjadi palsu. Walau bagaimanapun, peralihan tidak boleh digunakan pada elemen yang tidak wujud.

Penyelesaian:

Untuk peralihan yang lancar, gunakan [tersembunyi] dan bukannya [ngIf]:

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

Dengan cara ini, elemen kekal dalam DOM dan peralihan boleh digunakan apabila sifat persembahannya berubah.

Penyelesaian Kemas Kini dengan Animasi Sudut

Dalam Sudut 4.1.0 dan 2.1 .0, Angular Animations menyediakan cara yang lebih baik untuk mencapai peralihan dengan ngIf.

Angular 4.1.0 dan Kemudian:

<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 :

Pendekatan ini menggunakan animate() helper yang telah diperkenalkan pada 2.1.0. Rujuk dokumentasi animasi Angular untuk butiran lanjut.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Peralihan CSS Berfungsi dengan ngIf dalam Angular 2?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!