Bagaimana untuk Menghidupkan Elemen yang Dikawal oleh ngIf dalam Angular 2?

Angular 2 ngIf dan Peralihan/Animasi CSS

Soalan ini menyelidiki cabaran melaksanakan peralihan atau animasi CSS pada elemen yang dimanipulasi oleh ngIf arahan dalam Sudut 2.

Isu

Matlamatnya adalah untuk menghidupkan pintu masuk elemen dari sebelah kanan menggunakan CSS. Walau bagaimanapun, apabila ngIf digunakan untuk menyembunyikan elemen pada mulanya, peralihan gagal dicetuskan.

Penyelesaian

Isu utama terletak pada tingkah laku ngIf. Apabila ungkapan yang dikaitkan dengan ngIf menjadi palsu, elemen itu dialih keluar daripada DOM. Memandangkan peralihan dan animasi memerlukan elemen untuk hadir dalam DOM, menerapkannya pada elemen yang tidak dipaparkan tidak akan berfungsi.

Untuk menangani isu ini, cadangannya ialah menggunakan hidden dan bukannya ngIf untuk menyembunyikan elemen pada mulanya.

Penyelesaian Dikemas Kini (Angular 4.1.0 dan ke atas)

Dalam versi Angular 4.1.0 dan yang lebih baru, pendekatan pilihan adalah menggunakan animasi Sudut. Berikut ialah penyelesaian yang dikemas kini menggunakan animasi:

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

Penyelesaian ini menambahkan pencetus pada komponen yang dipanggil 'enterAnimation' dan mentakrifkan peralihan untuk kedua-dua keadaan masuk dan keluar. Peralihan termasuk penggayaan untuk transformasi dan kelegapan, membenarkan elemen meluncur masuk dari kanan dengan animasi.

Ingat, penyelesaian ini boleh digunakan untuk Angular 4.1.0 dan ke atas. Untuk versi yang lebih lama, menggunakan tersembunyi kekal sebagai pendekatan yang disyorkan.

Atas ialah kandungan terperinci Bagaimana untuk Menghidupkan Elemen yang Dikawal oleh ngIf dalam Angular 2?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!