Detaillierte Erläuterung der Angular-Routing-Animation und der erweiterten Animationsfunktionen

Detaillierte Erläuterung der Angular-Routing-Animation und der erweiterten Animationsfunktionen

1. Routing-Animation

Für Routenanimationen müssen Trigger in den Hostmetadaten angegeben werden. Achten Sie darauf, nicht zu viele Animationen zu verwenden, sonst kann es nach hinten losgehen.

Der Inhalt steht an erster Stelle und lenkt die Aufmerksamkeit der Benutzer auf bestimmte Inhalte. Animation ist nur eine Ergänzung.

Definieren Sie eine Eintrittsanimation und eine Austrittsanimation in router.animate.ts.

Da Ein- und Ausstiegsanimationen so häufig verwendet werden, gibt es einen Alias ​​namens :enter und :leave.

importiere {Trigger, Status, Übergang, Stil, Animation} aus „@angular/animations“;

exportiere const slideToRight = trigger('routeAnim',[
    Zustand('leer',Stil({'Position':'fest','Breite':'100%','Höhe':'100%'})),
    Zustand('*',Stil({'Position':'fest','Breite':'100%','Höhe':'80%'})),
    Übergang('void => *',[
        Stil ({Transform: 'translateX (-100%)'}),
        animieren('.5s ease-in-out', Stil({transform:'translateX(0)'}))
    ]),
    Übergang('* => void',[
        Stil({transform:'translateX(0)'}),
        animieren('.5s ease-in-out', Stil({transform:'translateX(100%)'}))
    ]),
]);

Routenanimation in der Projektliste verwenden.

importiere { Komponente, OnInit, HostBinding} aus "@angular/core";
importiere { MatDialog } von "@angular/material";
importiere { NewProjectComponent } aus "../new-project/new-project.component";
importiere { InviteComponent } von '../invite/invite.component';
importiere { ConfirmDialogComponent } von '../../shared/confirm-dialog/confirm-dialog.component';
importiere {slideToRight} von '../../animate/router.animate'

@Komponente({
  Selektor: "App-Projektliste",
  Vorlagen-URL: "./projektliste.komponente.html",
  styleUrls: ["./projektliste.component.scss"],
  Animationen:
    nach rechts schieben
  ]
})
Exportklasse ProjectListComponent implementiert OnInit {
  @HostBinding('@routeAnim') Status;

  Projekte = [
    {
      Name: „Enterprise Collaboration Platform“,
      desc: "Dies ist ein internes Projekt",
      coverImg: "assets/bilder/cover/0.jpg"
    },
    {
      Name: „Automatisiertes Testprojekt“,
      desc: "Dies ist ein internes Projekt",
      coverImg: "assets/bilder/covers/2.jpg"
    }
  ];
  Konstruktor(privater Dialog: MatDialog) { }

  ngOnInit() { }

  öffneNeuesProjektDialog() {
    // this.dialog.open(NewProjectComponent,{data:'Dies ist ein Dialog'});
    const dialogRef = this.dialog.open(NewProjectComponent, {
      Daten: {Titel: 'Neues Projekt'}
    });
    dialogRef.afterClosed().subscribe((Ergebnis) => {
      console.log(Ergebnis);
    });
  }

  lauchInviteDialog() {
    const dialogRef = this.dialog.open(InviteComponent);
  }

  launchUpdateDialog() {
    const dialogRef = this.dialog.open(NewProjectComponent, {
      Daten: {Titel: 'Projekt bearbeiten'}
    });
  }

  lauchConfimDialog() {
    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
      Daten: {Titel: ‚Element bearbeiten‘, Inhalt: ‚Möchten Sie dieses Element wirklich löschen?‘ ' }
    });
  }
}

Verwenden Sie die Routenanimation im Task-Home.

importiere { Komponente, OnInit, HostBinding} aus "@angular/core";
importiere { NewTaskComponent } aus "../new-task/new-task.component";
importiere { MatDialog } von "@angular/material";
importiere { CopyTaskComponent } aus "../copy-task/copy-task.component";
importiere { ConfirmDialogComponent } von "../../shared/confirm-dialog/confirm-dialog.component";
importiere { NewTaskListComponent } aus "../new-task-list/new-task-list.component";
importiere {slideToRight} von '../../animate/router.animate';

@Komponente({
  Selektor: "App-Task-Home",
  Vorlagen-URL: "./task-home.component.html",
  styleUrls: ["./task-home.component.scss"],
  Animationen:
    nach rechts schieben
  ]
})
export Klasse TaskHomeComponent implementiert OnInit {
  Konstruktor (privater Dialog: MatDialog) {}

  @HostBinding('@routeAnim') Status;
  ngOnInit() {}

  launchNewTaskDialog() {
    // this.dialog.open(NeueTaskKomponente);
    const dialogRef = this.dialog.open(NewTaskComponent, {
      data: { title: "Neue Aufgabe" }
    });
  }
  launchCopyTaskDialog() {
    const dialogRef = this.dialog.open(CopyTaskComponent, {
      Daten: { Listen: diese.Listen }
    });
  }

  startUpdateTaskDialog(Aufgabe) {
    const dialogRef = this.dialog.open(NewTaskComponent, {
      Daten: {Titel: "Aufgabe ändern", Aufgabe: Aufgabe}
    });
  }

  startConfirmDialog() {
    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
      data: { title: "Aufgabenliste löschen", content: "Möchten Sie diese Aufgabenliste wirklich löschen?" }
    });
  }

  startEditListDialog() {
    const dialogRef = this.dialog.open(NewTaskListComponent, {
      data: { title: "Listennamen ändern" }
    });
    dialogRef.afterClosed().subscribe(Ergebnis => console.log(Ergebnis));
  }
  launchNewListDialog() {
    const dialogRef = this.dialog.open(NewTaskListComponent, {
      data: { title: "Neuer Listenname" }
    });
    dialogRef.afterClosed().subscribe(Ergebnis => console.log(Ergebnis));
  }
  Listen = [
    {
      ID: 1,
      Name: "Aufgaben",
      Aufgaben:
        {
          ID: 1,
          desc: "Aufgabe 1: Gehe zu Starbucks, um Kaffee zu kaufen",
          abgeschlossen: wahr,
          Priorität: 3,
          Eigentümer:
            ID: 1,
            Name: "Zhang San",
            Avatar: „avatars:svg-11“
          },
          Fälligkeitsdatum: neues Datum(),
          Erinnerung: neues Datum()
        },
        {
          ID: 2,
          desc: „Aufgabe 1: Erledigen Sie die vom Chef zugewiesene PPT-Aufgabe“,
          abgeschlossen: falsch,
          Priorität: 2,
          Eigentümer:
            ID: 2,
            Name: "Li Si",
            Avatar: „avatare:svg-12“
          },
          Fälligkeitsdatum: neues Datum()
        }
      ]
    },
    {
      ID: 2,
      Name: "In Bearbeitung",
      Aufgaben:
        {
          ID: 1,
          desc: "Aufgabe 3: Überprüfung des Projektcodes",
          abgeschlossen: falsch,
          Priorität: 1,
          Eigentümer:
            ID: 1,
            Name: "Wang Wu",
            Avatar: „avatare:svg-13“
          },
          Fälligkeitsdatum: neues Datum()
        },
        {
          ID: 2,
          desc: "Aufgabe 1: Einen Projektplan entwickeln",
          abgeschlossen: falsch,
          Priorität: 2,
          Eigentümer:
            ID: 2,
            Name: "Li Si",
            Avatar: „avatare:svg-12“
          },
          Fälligkeitsdatum: neues Datum()
        }
      ]
    }
  ];
}

Routen definieren

<mat-list-item [routerLink]="['/projekt']"> 
    <mat-icon mat-list-icon svgIcon="Projekte"></mat-icon>
    <h4 mat-line>Projekt-Homepage</h4>
    <p mat-line mat-subheader>Alle Ihre Projekte anzeigen</p>
  </mat-list-item>
  <mat-list-item [routerLink]="['/task']"> 
    <mat-icon mat-list-icon svgIcon="Projekte"></mat-icon>
    <h4 mat-line>Aufgaben-Homepage</h4>
    <p mat-line mat-subheader>Alle Ihre Projekte anzeigen</p>
  </mat-list-item>

Hinweis: Verwenden Sie unbedingt das HostBinding-Format.

2. Gruppe

Wird verwendet, um eine Gruppe von Transformationen gleichzeitig zu animieren

group([animate(...),animate(...)...]) erhält ein Array, in das mehrere Animationen geschrieben werden.

importiere {Trigger, Status, Übergang, Stil, Animation, Gruppe} aus „@angular/animations“;

exportiere const slideToRight = trigger('routeAnim',[
    Zustand('leer',Stil({'Position':'fest','Breite':'100%','Höhe':'80%'})),
    Zustand('*',Stil({'Position':'fest','Breite':'100%','Höhe':'80%'})),
    Übergang(':eingeben',[
        Stil ({Transform:'translateX(-100%)', Opazität:'0'}),
        Gruppe([
            animieren('.5s ease-in-out', Stil({transform:'translateX(0)'})),
            animieren('.3s ease-in', Stil({opacity:1}))
        ])
    ]),
    Übergang(':verlassen',[
        Stil({Transform:'translateX(0)',Deckkraft:'1'}),
        Gruppe([
            animieren('.5s ease-in-out', Stil({transform:'translateX(100%)'})),
            animieren('.3s ease-in', Stil({opacity:0}))
        ])
    ]),
]);

Abfragen und Staffeln

Die Abfrage wird vom übergeordneten Knoten verwendet, um den untergeordneten Knoten zu finden und die Animation auf das ausgewählte Element anzuwenden. Sehr leistungsstark.

Stagger gibt an, dass es mehrere Elemente gibt, die die Abfrage erfüllen, und dass zwischen jeder Animation ein Intervall besteht.

Nehmen wir ein Beispiel: Wenn Sie ein neues Projekt erstellen, erstellen Sie gleichzeitig zwei neue Projekte. Die Animationen der beiden neuen Projekte werden nacheinander generiert und das zweite Projekt wird gestartet, nachdem das erste abgeschlossen ist.

Erstellen Sie list.animate.ts

Die Eingangsanimation wird zunächst ausgeblendet und durch Staggern im Abstand von 1000 Sekunden eine 1-Sekunden-Animation erstellt.

importiere {Trigger, Status, Übergang, Stil, Animation, Abfrage, Animation, Stagger} aus '@angular/animations';

exportiere const listAnimation = trigger('listAnim', [
    Übergang('* => *', [
      query(':enter', style({opacity: 0}), { optional: true }), //Optional zu true hinzufügen, die folgenden Statusanimationen sind optional query(':enter', stagger(1000, [
        animieren('1s', Stil({Deckkraft: 1}))
      ]), { optional: true }),
      Abfrage(':verlassen', Stil({Deckkraft: 1}), { optional: true }),
      Abfrage(':verlassen', staffeln(1000, [
        animieren('1s', Stil({Deckkraft: 0}))
      ]), { optional: true })
    ])
  ]);

Verwendung in project_list

Die Abfrageanimation wird normalerweise zusammen mit *ngFor angewendet und außerhalb wird eine Div-Ebene benötigt.

<div Klasse="Container" [@listAnim]="Projekte.Länge">
  <app-project-item *ngFor="let Projekt von Projekten" [item]="Projekt"
  Klasse="Karte"
  (beiEinladung)="Einladungsdialog starten()"
  (beim Bearbeiten)="UpdateDialog starten()"
  (beimLöschen)="lauchConfimDialog(Projekt)">
  </app-project-item>
</div>
<button class="ab-buttonmad-fab fab-button" mat-fab type="button" (klicken)="openNewProjectDialog()">
  <mat-icon>hinzufügen</mat-icon>
</button>

Ändern Sie das entsprechende CSS

// :Gastgeber{
// Anzeige: flex;
// Flex-Richtung: Zeile;
// Flex-Wrap: Wrap;
// }

//Host in div ändern
.Container{
    Anzeige: Flex;
    Flex-Richtung: Reihe;
    Flex-Wrap: Umwickeln;
}

Ändern der Komponente

importiere { Komponente, OnInit, HostBinding} aus "@angular/core";
importiere { MatDialog } von "@angular/material";
importiere { NewProjectComponent } aus "../new-project/new-project.component";
importiere { InviteComponent } von '../invite/invite.component';
importiere { ConfirmDialogComponent } von '../../shared/confirm-dialog/confirm-dialog.component';
importiere {slideToRight} von '../../animate/router.animate'
importiere { listAnimation } von '../../animate/list.animate';
importiere {Projektion} von '@angular/core/src/render3';

@Komponente({
  Selektor: "App-Projektliste",
  Vorlagen-URL: "./projektliste.komponente.html",
  styleUrls: ["./projektliste.component.scss"],
  Animationen:
    slideToRight,listAnimation //Der erste Schritt besteht darin, listAnimation zu importieren
  ]
})
Exportklasse ProjectListComponent implementiert OnInit {
  @HostBinding('@routeAnim') Status;

  //Der zweite Schritt besteht darin, das Array zu transformieren und die ID hinzuzufügen
  Projekte = [
    {
      Ich würde: 1,
      Name: „Enterprise Collaboration Platform“,
      desc: "Dies ist ein internes Projekt",
      coverImg: "assets/bilder/cover/0.jpg"
    },
    {
      Ich würde: 2,
      Name: „Automatisiertes Testprojekt“,
      desc: "Dies ist ein internes Projekt",
      coverImg: "assets/bilder/covers/2.jpg"
    }
  ];
  Konstruktor(privater Dialog: MatDialog) { }

  ngOnInit() { }

  //Schritt 3, openNewProjectDialog() beim Hinzufügen neuer Elemente hart codieren {
    // this.dialog.open(NewProjectComponent,{data:'Dies ist ein Dialog'});
    const dialogRef = this.dialog.open(NewProjectComponent, {
      Daten: {Titel: 'Neues Projekt'}
    });
    dialogRef.afterClosed().subscribe((Ergebnis) => {
      console.log(Ergebnis);
      this.projects = [...this.projects, 
        {id:3,name:'Ein neues Projekt',desc:'Dies ist ein neues Projekt',coverImg:"assets/images/covers/3.jpg"},
        {id:4,name:'Ein weiteres neues Projekt',desc:'Dies ist ein weiteres neues Projekt',coverImg:"assets/images/covers/4.jpg"}]
    });
  }

  lauchInviteDialog() {
    const dialogRef = this.dialog.open(InviteComponent);
  }

  launchUpdateDialog() {
    const dialogRef = this.dialog.open(NewProjectComponent, {
      Daten: {Titel: 'Projekt bearbeiten'}
    });
  }

  //Schritt 4: Ändern und löschen Sie das Projekt lauchConfimDialog(project) {
    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
      Daten: {Titel: ‚Element löschen‘, Inhalt: ‚Möchten Sie dieses Element wirklich löschen?‘ ' }
    });
    dialogRef.afterClosed().subscribe(Ergebnis=>{
      console.log(Ergebnis);
      dies.Projekte=dieses.Projekte.filter(p=>p.id!=project.id);
    });
  }
}

Durch Stagger werden die Animationen bei mehreren Elementen versetzt und nicht auf einmal ausgeführt.

Oben finden Sie eine ausführliche Erläuterung der Angular-Routing-Animation und der erweiterten Animationsfunktionen. Weitere Informationen zur Angular-Routing-Animation und den erweiterten Animationsfunktionen finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • Detaillierte Erläuterung der Angular-Routing-Unterrouten
  • Detaillierte Erläuterung der Angular-Routing-Grundlagen
  • Angular-Multilevel-Routing zum Erreichen eines Sprungs zur Anmeldeseite (Tutorial für Anfänger)
  • Verwendung des Standardroutings in Angular

<<:  Detaillierte Erläuterung der Nginx-Strombegrenzungskonfiguration

>>:  MySQL 5.7.21 dekomprimierte Version des Tutorials zum Wiederherstellen von Daten über das historische Datenverzeichnis

Artikel empfehlen

Beispielanalyse für MySQL-Jointabelle und automatische ID-Inkrementierung

Wie schreibt man „join“? Wenn Sie „Left Join“ ver...

Detaillierte Erklärung des Unterschieds und der Verwendung von Anführungszeichen und Backticks in MySQL

Vorwort Also habe ich diesen Blog geschrieben. Di...

Eine kurze Erläuterung zum Ändern/Festlegen der Umgebungsvariable JAVA_HOME unter Linux

1. Dauerhafte Änderung, gültig für alle Benutzer ...

Verwenden von CSS3 zum Implementieren eines Schriftfarbverlaufs

Beim Verwenden von Animation.css habe ich festges...

Schritte zur Installation von GRUB auf einem Linux-Server

So installieren Sie GRUB für Linux Server Sie kön...

Sprechen Sie über nextTick in Vue

Wenn sich die Daten ändern, wird die DOM-Ansicht ...

CSS, um horizontale Linien auf beiden Seiten des mittleren Textes zu erreichen

1. Die Eigenschaft „vertical-align“ erzielt folge...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.6.15 unter Windows 8

MySQL ist eine Datenbank, die mir sehr gefällt. H...

Sprechen Sie kurz über MySQL Left Join Inner Join

Vorwort Ich war kürzlich damit beschäftigt, ein K...

Optimierung von JavaScript und CSS zur Verbesserung der Website-Leistung

<br /> Im ersten und zweiten Teil haben wir ...

Vue implementiert einen beweglichen schwebenden Button

In diesem Artikelbeispiel wird der spezifische Co...

Miniprogramme nutzen die Miniprogramm-Cloud zur Implementierung von WeChat-Zahlungsfunktionen

Inhaltsverzeichnis 1. WeChat Pay öffnen 1.1 Partn...

Analyse des Docker-Compose-Image-Release-Prozesses des Springboot-Projekts

Einführung Das Docker-Compose-Projekt ist ein off...

So importieren Sie CSS-Stile in externe HTML-Stylesheets

Der Link-In-Stil besteht darin, alle Stile in ein...

Vue + SSM realisiert den Vorschaueffekt beim Hochladen von Bildern

Die aktuelle Anforderung lautet: Es gibt eine Sch...