Comment obtenir des transitions CSS fluides avec ngIf d'Angular 2 ?

Angular 2 ngIf et CSS Transition/Animation : résoudre les problèmes de transition

Avec ngIf, il est courant de rencontrer des défis lors de la tentative de transitions CSS sur des éléments contrôlés par la directive. ngIf supprime des éléments du DOM lorsque sa condition devient fausse, empêchant ainsi l'application de transitions.

Problème original

Lors de l'utilisation de ngIf avec les transitions CSS, l'élément est masqué initialement et les transitions ne fonctionneront pas.

Solution

Puisque ngIf supprime les éléments de le DOM, une approche alternative consiste à utiliser l'attribut caché à la place.

Exemple de code

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

Alternativement, avec Angular 4.1.0 et supérieur

Les animations angulaires offrent un moyen élégant de gérer de telles transitions.

Exemple de code

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

Avantages de l'utilisation des animations

• Les animations angulaires permettent un contrôle précis de la chronologie des transitions et des fonctions d'assouplissement.
• Elles gèrent les transitions d'entrée et de sortie de manière transparente.
• Maintenabilité et lisibilité des Le code CSS est amélioré en séparant la logique de transition en un composant distinct.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!