Bagaimana untuk Mencapai Peralihan CSS Lancar dengan ngIf Sudut 2?

Angular 2 ngIf dan CSS Transition/Animation: Menyelesaikan Isu Peralihan

Dengan ngIf, adalah perkara biasa untuk menghadapi cabaran apabila mencuba peralihan CSS pada elemen yang dikawal oleh arahan. ngIf mengalih keluar elemen daripada DOM apabila keadaannya menjadi palsu, menghalang keupayaan untuk menggunakan peralihan.

Isu Asal

Apabila menggunakan ngIf dengan peralihan CSS, elemen disembunyikan pada mulanya dan peralihan tidak akan berfungsi.

Penyelesaian

Memandangkan ngIf mengalih keluar elemen daripada DOM, pendekatan alternatif ialah menggunakan atribut tersembunyi sebaliknya.

Contoh Kod

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

Sebagai alternatif, dengan Angular 4.1.0 dan ke atas

Animasi sudut menyediakan cara yang elegan untuk mengendalikan peralihan sedemikian.

Sampel Kod

<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}))
                ])
            ]
        )
    ],
    template: `
        <button (click)="show = !show">toggle show ({{show}})</button>

        <div *ngIf="show" [@enterAnimation]>xxx</div>
    `
})
export class App {
    show: boolean = false;
}</code>

Kelebihan Menggunakan Animasi

• Animasi sudut membenarkan kawalan tepat ke atas garis masa peralihan dan fungsi pelonggaran.
• Animasi ini mengendalikan peralihan masuk dan keluar dengan lancar.
• Kebolehselenggaraan dan kebolehbacaan Kod CSS dipertingkatkan dengan mengasingkan logik peralihan kepada komponen yang berasingan.

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