Detaillierte Erläuterung der Angular-Routing-Animation und der erweiterten Animationsfunktionen
1. Routing-AnimationFü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. GruppeWird 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 StaffelnDie 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 Nginx-Strombegrenzungskonfiguration
Artikel empfehlen
CSS- und HTML- und Front-End-Technologie-Schichtendiagramm
Front-End-Technologieschicht (Das Bild ist etwas e...
Beispielcode für die Verwendung von Nginx zur Implementierung einer 301-Weiterleitung zum https-Stammdomänennamen
Aus SEO- und Sicherheitsgründen ist eine 301-Weit...
So konfigurieren Sie MySQL8 in Nacos
1. Erstellen Sie die MySQL-Datenbank nacos_config...
Tiefgreifendes Verständnis des relativen Pfads (Relative Path) und des absoluten Pfads (Absolute Path) in HTML
Ich beschäftige mich seit über einem Jahr mit Java...
Zusammenfassung der Tipps zum Erstellen von Webseiten
Vorwort Dieser Artikel fasst hauptsächlich einige...
Docker Compose-Installationsmethoden in verschiedenen Umgebungen
1. Online-Installation Derzeit habe ich nur die O...
Einführung von Symbolen durch Implementierung benutzerdefinierter Komponenten auf Basis von Vue
Vorwort Bei der Projektentwicklung gibt es viele ...
Detaillierte Erläuterung zum Hinzufügen von Sicherheitsgruppenregeln zum Alibaba Cloud Server (grafisches Tutorial)
Überblick über die Alibaba Cloud Security Group F...
Eine kurze Diskussion über zwei Methoden zum Erreichen einer halbtransparenten Hintergrundfarbe in CSS
Um den Benutzern beim Layouten der Seite einen an...
Erfahren Sie mehr über den Hyperlink A-Tag
fragen: Ich habe den Hyperlink mit CSS formatiert...
Verwenden von CSS zum Implementieren einer Ladeanimation des Android-Systems
Im Web gibt es zwei gängige Ladesymbole: eines is...
Detaillierte Erklärung der CSS-Hintergrund- und Rahmen-Tag-Beispiele
1. CSS-Hintergrund-Tag 1. Stellen Sie die Hinterg...
Beheben Sie den Fehler bei der Installation von VMware Tools unter Ubuntu 18.04
1. Laut dem Online-Tutorial schlägt die Installat...
Tutorial-Diagramm zur VMware-Installation des Centos8-Systems (Befehlszeilenmodus)
Inhaltsverzeichnis 1. Software- und Systemabbild ...
Lösung für das Absturzproblem beim Öffnen des Befehlszeilenfensters nach der Installation von MySQL 5.7
Vorwort Ich habe vor Kurzem MySQL 5.7 installiert...