1. Was ist der Zustand
? Der Zustand repräsentiert den Stil des zu bewegenden Elements in verschiedenen Phasen der Bewegung. [Empfohlene verwandte Tutorials: „Angular-Tutorial“]
2. Arten von Zuständen
In Angular gibt es drei Arten von Zuständen: void , * , custom 
void : Dieser Status tritt auf, wenn das Element im Speicher erstellt, aber noch nicht zum DOM hinzugefügt wurde
, oder wenn das Element aus dem DOM entfernt wird. * : Der Status, nachdem das Element in den DOM-Baum eingefügt wurde oder bereits ein Element im DOM ist DOM-Baumstatus, auch als Standardstatus benutzerdefinierter Status bezeichnet
custom Benutzerdefinierter Status. Das Element befindet sich standardmäßig auf der Seite und wechselt von einem Status in einen anderen, z. B. durch Falten und Erweitern des Bedienfelds.
3. Eingabe- und Ausgabeanimation
bedeutet, dass das Element nach seiner Erstellung in Form einer Animation vor dem Benutzer angezeigt wird. Der Status der Eingabeanimation wird durch void => * dargestellt und der Alias lautet :enter
Die Exit-Animation bezieht sich auf eine Abschiedsanimation, die vor dem Löschen des Elements durchgeführt wird. Der Status der Exit-Animation ist * => void und der Alias ist :leave
1. Bevor Sie die Animationsfunktion verwenden, müssen Sie das Animationsmodul vorstellen, nämlich BrowserAnimationsModule
importiere { BrowserAnimationsModule } aus „@angular/platform-browser/animations“
@NgModule({
Importe: [BrowserAnimationsModule],
})
export class AppModule {} 2. Standardcode-Analyse, Aufgaben zum Löschen und Hinzufügen von Aufgaben
<!-- Einführung von bootstrap.min.css in der Datei index.html --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<div class="container">
<h2>Todos</h2>
<div class="form-group">
<input (keyup.enter)="addItem(input)" #input type="text" class="form-control" placeholder="add todos" />
</div>
<ul class="list-group">
<li (click)="removeItem(i)" *ngFor="let item of todos; let i = index" class="list-group-item">
{{ Artikel }}
</li>
</ul>
</div> { Component } aus „@angular/core“ importieren
@Komponente({
Selektor: „app-root“,
templateUrl: „./app.component.html“,
Stile: []
})
Exportklasse AppComponent {
// Aufgabenliste Aufgaben: string[] = ["Learn Angular", "Learn RxJS", "Learn NgRx"]
// Todo hinzufügen
addItem(input: HTMLInputElement) {
this.todos.push(input.value)
input.value = ""
}
// Aufgaben löschen
removeItem(index: Zahl) {
this.todos.splice(index, 1)
}
} 3.
Die Trigger-Methode wird zum Erstellen der Animation verwendet, und
die Übergangsmethode wird zum Angeben des Animationsnamens verwendet. Die Übergangsmethode wird zum Angeben des Bewegungsstatus der Animation, der Ausgangsanimation oder der Eingangsanimation oder des benutzerdefinierten Status verwendet Animation.
Die style-Methode wird verwendet, um den Stil festzulegen, der dem Element in verschiedenen Zuständen entspricht.
Die animate-Methode wird verwendet, um Bewegungsparameter wie Animationsbewegungszeit, verzögerte Ereignisse und Bewegungsformen festzulegen
@Component({
Animationen: [
//Animation erstellen, Animationsname ist Folie
trigger("slide", [
// Geben Sie die Eingangsanimation an. Hinweis: Auf beiden Seiten der Zeichenfolge dürfen keine Leerzeichen stehen, und auf beiden Seiten des Pfeils können Leerzeichen stehen oder nicht. // void => * kann ersetzt werden durch: enter
Transition("void => *", [
// Geben Sie den Stil des Elements an, bevor es eingegeben wird style({ opacity: 0, transform: "translateY(40px)" }),
// Geben Sie die Stil- und Bewegungsparameter des Elements nach dem Eintritt in die Szene an animate(250, style({ opacity: 1, transform: "translateY(0)" }))
]),
//Exit-Animation angeben// * => void kann ersetzt werden durch:leave
Transition("* => void", [
//Geben Sie die Stil- und Bewegungsparameter des Elements an, nachdem es angezeigt wird animate(600, style({ opacity: 0, transform: "translateX(100%)" }))
])
])
]
}) Hinweis: Sie müssen den Standardstatus des Elements in der Eingangsanimation nicht angeben. Angular löscht den Void-Status als Standardstatus-
Trigger („slide“, [).
Transition(":enter", [
style({ opacity: 0, transform: "translateY(40px)" }),
animieren(250)
]),
transit(":leave", [
animate(600, style({ opacity: 0, transform: "translateX(100%)" }))
])
]) Hinweis: Um die Bewegungsparameter der Animation festzulegen, müssen Sie einen Parameter der Animationsmethode in einen String-Typ ändern
// Gesamtausführungszeit der Animation Verzögerungszeit (optional) Bewegungsform (optional)
animate("600ms 1s equal-out", style({ opacity: 0, transform: "translateX(100%)" })) Die Keyframe-Animation wird mithilfe der keyframes -Methode definiert
transit(":leave", [
animieren(
600,
Schlüsselbilder([
style({ offset: 0.3, transform: "translateX(-80px)" }),
style({ offset: 1, transform: "translateX(100%)" })
])
)
]) Angular bietet zwei Rückruffunktionen im Zusammenhang mit der Animation, nämlich zu Beginn der Animation und nach Abschluss der Animation.
<li @slide (@slide.start)="start($event)" (@slide.done)="done($event)"></li>
import { AnimationEvent } from „@angular/animations“
start(event: AnimationEvent) {
console.log(Ereignis)
}
done(event: AnimationEvent) {
console.log(Ereignis)
} 1. Platzieren Sie die Animationsdefinition in einer separaten Datei, um mehrere Komponentenaufrufe zu ermöglichen.
import { animieren, Keyframes, Stil, Übergang, Trigger } aus „@angular/animations“
export const slide = trigger("slide", [
Transition(":enter", [
style({ opacity: 0, transform: "translateY(40px)" }),
animieren(250)
]),
transit(":leave", [
animieren(
600,
Schlüsselbilder([
style({ offset: 0.3, transform: "translateX(-80px)" }),
style({ offset: 1, transform: "translateX(100%)" })
])
)
])
]) { Folie } aus „./animations“ importieren
@Komponente({
Animationen: [Folie]
}) 2. Extrahieren Sie bestimmte Animationsdefinitionen, um mehrere Animationsaufrufe zu ermöglichen.
Importiere {animate, Animation, Keyframes, Style, Transition, Trigger, useAnimation} aus „@angular/animations“
export const slideInUp = animation([
style({ opacity: 0, transform: "translateY(40px)" }),
animieren(250)
])
export const slideOutLeft = animation([
animieren(
600,
Schlüsselbilder([
style({ offset: 0.3, transform: "translateX(-80px)" }),
style({ offset: 1, transform: "translateX(100%)" })
])
)
])
export const slide = trigger("slide", [
Transition(":enter", useAnimation(slideInUp)),
Transition(":leave", useAnimation(slideOutLeft))
]) 3. Übertragen Sie beim Aufruf der Animation die Gesamtbewegungszeit, Verzögerungszeit und Bewegungsform
export const slideInUp = animation(
[
style({ opacity: 0, transform: "translateY(40px)" }),
animate("{{ duration }} {{ delay }} {{ easing }}")
],
{
Parameter: {
Dauer: „400ms“,
Verzögerung: „0s“,
Lockerung: „ease-out“
}
}
) transit(":enter", useAnimation(slideInUp, {params: {delay: "1s"}})) Angular bietet query , um Elemente zu finden und Animationen für sie zu erstellen
{ Folie } aus „./animations“ importieren
Animationen: [
gleiten,
trigger("todoAnimations", [
Transition(":enter", [
query("h2", [
style({ transform: "translateY(-30px)" }),
animieren(300)
]),
// Untergeordnete Animation zur Ausführung abfragen query("@slide", animateChild())
])
])
] <div class="container" @todoAnimations>
<h2>Todos</h2>
<ul class="list-group">
<li
@gleiten
(click)="removeItem(i)"
*ngFor="let item of todos; let i = index"
class="list-group-item"
>
{{ Artikel }}
</li>
</ul>
</div> Standardmäßig werden die übergeordnete Animation und die untergeordnete Animation der Reihe nach ausgeführt, und dann wird die untergeordnete Animation ausgeführt. Sie können die group verwenden, um sie parallel auszulösen
("todoAnimations", [.
Transition(":enter", [
Gruppe([
query("h2", [
style({ transform: "translateY(-30px)" }),
animieren(300)
]),
query("@slide", animateChild())
])
])
]) Angular bietet die Stagger-Methode, um die Ausführung der Animation jedes Elements nacheinander zu verzögern, wenn mehrere Elemente gleichzeitig dieselbe Animation ausführen.
Transition(":enter", [
Gruppe([
query("h2", [
style({ transform: "translateY(-30px)" }),
animieren(300)
]),
query("@slide", stagger(200, animateChild()))
])
]) Hinweis: Die Stagger-Methode kann nur innerhalb der Abfragemethode verwenden.
Angular stellt die state zum Definieren des Zustands bereit.
1. Standardcode-Analyse
<div class="container">
<div class="panel panel-default">
<div class="panel-heading" (click)="toggle()">
Ein Framework, mehrere Plattformen, mobil und Desktop</div>
<div class="panel-body">
<p>
Verwenden Sie einfache deklarative Vorlagen, um verschiedene Funktionen schnell zu implementieren. Erweitern Sie die Vorlagensprache mit benutzerdefinierten Komponenten und einer Vielzahl vorhandener Komponenten. Erhalten Sie Unterstützung für Angular in fast jeder IDE
für sofortige Hilfe und Feedback. All dies soll Ihnen dabei helfen, schöne Anwendungen zu schreiben, anstatt sich den Kopf zu zerbrechen, damit der Code „funktioniert“.
</p>
<p>
Angular bietet Ihnen vom Prototyp bis zur globalen Bereitstellung Unterstützung für Google
Hochskalierbare Infrastruktur und Technologien für Großanwendungen.
</p>
<p>
Erreichen Sie das Web heute (und morgen) mit Web Workern und serverseitigem Rendering
Die höchste auf der Plattform erreichbare Geschwindigkeit. Mit Angular haben Sie eine effektive Kontrolle über die Skalierbarkeit. Basierend auf RxJS, Immutable.js und anderen Push-Modellen kann es sich an massive Datenanforderungen anpassen.
</p>
<p>
Lernen Sie, Angular zu verwenden
Erstellen Sie Anwendungen und verwenden Sie diesen Code und diese Funktionen dann in Anwendungen auf vielen verschiedenen Plattformen wieder –
Web, mobiles Web, mobile Apps, native Apps und native Desktop-Apps.
</p>
</div>
</div>
</div>
<Stil>
.container {
Rand oben: 100px;
}
.panel-heading {
Cursor: Zeiger;
}
</style> { Component } aus „@angular/core“ importieren
@Komponente({
Selektor: „app-root“,
templateUrl: „./app.component.html“,
Stile: []
})
Exportklasse AppComponent {
isExpended: boolean = false
toggle() {
this.isExpended = !this.isExpended
}
} 2. Animationstrigger erstellen
("expandCollapse", [
// Verwenden Sie die State-Methode, um den Stil zu definieren, der dem gefalteten Statuselement state(
„zusammengebrochen“,
Stil({
Höhe: 0,
Überlauf: „versteckt“,
paddingTop: 0,
paddingBottom: 0
})
),
// Verwenden Sie die State-Methode, um den Stil zu definieren, der dem erweiterten Statuselement entspricht state("expanded", style({ height: "*", overflow: "auto" })),
// Definiere den Erweiterungsanimationsübergang("collapsed => expanded", animate("400ms equal-out")),
// Definiere den Übergang der Faltanimation („expanded => Collapsed“, animate(“400ms EASY-IN“))
]) <div class="panel-body" [@expandCollapse]="isExpended ? 'expanded' : 'collapsed'"></div>
1. Fügen Sie der Route eine Statuskennung hinzu. Diese Kennung ist der benutzerdefinierte Status, wenn die Route Animationskonstantenrouten ausführt
: Routes = [
{
Weg: "",
Komponente: HomeComponent,
pathMatch: „voll“,
Daten: {
Animation: „eins“
}
},
{
Pfad: „ungefähr“,
Komponente: AboutComponent,
Daten: {
Animation: „zwei“
}
},
{
Pfad: „Neuigkeiten“,
Komponente: NewsComponent,
Daten: {
Animation: „drei“
}
}
] 2. Erhalten Sie die Routing-Status-ID über das Routing-Socket-Objekt und übergeben Sie die ID an den Aufrufer der Animation, damit die Animation den aktuell auszuführenden Status ausführen kann
<div class="routerContainer" [@routerAnimations]=" „prepareRoute(outlet)“ > <router-outlet #outlet="outlet"></router-outlet> </div>
{ RouterOutlet } aus „@angular/router“ importieren
Exportklasse AppComponent {
PrepareRoute(outlet: RouterOutlet) {
zurückkehren (
Steckdose &&
outlet.activatedRouteData &&
outlet.activatedRouteData.animation
)
}
} 3. Setzen Sie routerContainer auf relative Positionierung und seine direkten untergeordneten Elemente der ersten Ebene auf absolute Positionierung
/*styles.css */
.routerContainer {
Position: relativ;
}
.routerContainer > * {
Position: absolut;
links: 0;
oben: 0;
Breite: 100 %;
} 4. Animationstrigger erstellen
("routerAnimations", [
transit("eins => zwei, eins => drei, zwei => drei", [
query(":enter", style({ transform: "translateX(100%)", opacity: 0 })),
Gruppe([
Abfrage(
":eingeben",
animieren(
„0,4 Sek. Einschwingzeit“,
style({ transform: "translateX(0)", opacity: 1 })
)
),
Abfrage(
":verlassen",
animieren(
„0,4 s Ease-out“,
Stil({
transform: „translateX(-100%)“,
Deckkraft: 0
})
)
)
])
]),
transit("drei => zwei, drei => eins, zwei => eins", [
Abfrage(
":eingeben",
style({ transform: "translateX(-100%)", Deckkraft: 0 })
),
Gruppe([
Abfrage(
":eingeben",
animieren(
„0,4 Sek. Einschwingzeit“,
style({ transform: "translateX(0)", opacity: 1 })
)
),
Abfrage(
":verlassen",
animieren(
„0,4 s Ease-out“,
Stil({
transform: „translateX(100%)“,
Deckkraft: 0
})
)
)
])
])
]) Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideo! !
Was ist der Status? Erfahren Sie mehr über Animationen in Angular. Weitere Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!