Wie erreicht man reibungslose CSS-Übergänge mit ngIf von Angular 2?

Angular 2 ngIf und CSS-Übergang/Animation: Übergangsprobleme lösen

Bei ngIf kommt es häufig zu Herausforderungen beim Versuch von CSS-Übergängen für Elemente, die von der Direktive gesteuert werden. ngIf entfernt Elemente aus dem DOM, wenn seine Bedingung falsch wird, wodurch die Möglichkeit zum Anwenden von Übergängen beeinträchtigt wird.

Ursprüngliches Problem

Bei Verwendung von ngIf mit CSS-Übergängen wird das Element zunächst ausgeblendet und Übergänge funktionieren nicht.

Lösung

Da ngIf Elemente aus entfernt Im DOM besteht ein alternativer Ansatz darin, stattdessen das versteckte Attribut zu verwenden.

Codebeispiel

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

Alternativ mit Angular 4.1.0 und höher

Angular-Animationen bieten eine elegante Möglichkeit, mit solchen Übergängen umzugehen.

Codebeispiel

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

Vorteile der Verwendung von Animationen

• Winkelanimationen ermöglichen eine präzise Steuerung der Übergangszeitleiste und Beschleunigungsfunktionen.
• Sie handhaben sowohl eingehende als auch verlassende Übergänge nahtlos.
• Wartbarkeit und Lesbarkeit von Der CSS-Code wird verbessert, indem die Übergangslogik in eine separate Komponente aufgeteilt wird.

Das obige ist der detaillierte Inhalt vonWie erreicht man reibungslose CSS-Übergänge mit ngIf von Angular 2?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!