1. Qu'est-ce que l'état
? L'état représente le style de l'élément à déplacer aux différentes étapes du mouvement. [Tutoriels associés recommandés : "tutoriel angulaire"]
2. Types d'états
Dans Angular, il existe trois types d'états : void , * , custom 
void : Cet état se produit lorsque l'élément est créé en mémoire mais n'a pas encore été ajouté au DOM ou que l'élément est supprimé du DOM
* : L'état après que l'élément est inséré dans l'arborescence DOM, ou est un élément déjà dans le DOM. État de l'arborescence DOM, également appelé état par défaut personnalisé
custom état personnalisé, l'élément est sur la page par défaut et passe d'un état à un autre, comme plier et agrandir le panneau.
3. Animation d'entrée et de sortie.
L'animation d'entrée signifie que l'élément apparaît devant l'utilisateur sous forme d'animation après sa création. L'état de l'animation d'entrée est représenté par void => * , et l'alias est :enter
L'animation de sortie fait référence à une animation d'adieu réalisée avant la suppression de l'élément. Le statut de l'animation de sortie est * => void , et l'alias est :leave
1. Avant d'utiliser la fonction d'animation, vous devez introduire le module d'animation, à savoir BrowserAnimationsModule
importer { BrowserAnimationsModule } depuis "@angular/platform-browser/animations"
@NgModule({
importations : [BrowserAnimationsModule],
})
export class AppModule {} 2. Analyse du code par défaut, tâche de suppression de tâches et ajout de tâche
<!-- Présentation de bootstrap.min.css dans le fichier index.html --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<div class="container">
<h2>Tous</h2>
<div class="form-group">
<input (keyup.enter)="addItem(input)" #input type="text" class="form-control" placeholder="ajouter des tâches" />
</div>
<ul class="list-group">
<li (click)="removeItem(i)" *ngFor="laisser l'élément de todos ; let i = index" class="list-group-item">
{{ article }}
</li>
</ul>
</div> importer { Composant } depuis "@angular/core"
@Composant({
sélecteur : "app-root",
templateUrl : "./app.component.html",
styles : []
})
classe d'exportation AppComponent {
// liste de tâches à faire : string[] = ["Learn Angular", "Learn RxJS", "Learn NgRx"]
// ajoute une tâche
addItem (entrée : HTMLInputElement) {
this.todos.push(input.value)
entrée.valeur = ""
}
// Supprimer la tâche
RemoveItem (index : numéro) {
this.todos.splice(index, 1)
}
} 3. Créer une animation.La
méthode de déclenchement est utilisée pour créer une animation et
la méthode de transition est utilisée pour spécifier le nom de l'animation. La méthode de transition est utilisée pour spécifier l'état de mouvement de l'animation, l'animation de sortie ou l'animation d'entrée, ou l'état personnalisé. animation.
La méthode style est utilisée pour définir le style correspondant à l'élément dans différents états.
La méthode animate est utilisée pour définir les paramètres de mouvement, tels que la durée du mouvement de l'animation, les événements retardés et les formes de mouvement
@Component({.
animations : [
//Créer une animation, le nom de l'animation est slide
trigger("diapositive", [
// Spécifiez l'animation d'entrée. Remarque : il ne peut pas y avoir d'espaces des deux côtés de la chaîne, et il peut ou non y avoir des espaces des deux côtés de la flèche. // void => * peut être remplacé par : enter.
transition("vide => *", [
// Spécifiez le style de l'élément avant qu'il n'entre style({ opacity : 0, transform : "translateY(40px)" }),
//Spécifiez les paramètres de style et de mouvement de l'élément après être entré dans la scène animate(250, style({ opacity: 1, transform: "translateY(0)" }))
]),
//Spécifier l'animation de sortie// * => void peut être remplacé par : leave
transition("* => vide", [
//Spécifiez les paramètres de style et de mouvement de l'élément après son apparition animate(600, style({ opacity: 0, transform: "translateX(100%)" }))
])
])
]
}) Remarque : Vous n'avez pas besoin de spécifier l'état par défaut de l'élément dans l'animation d'entrée. Angular effacera l'état vide comme
déclencheur d'état par défaut ("slide", [.
transition(":entrée", [
style({ opacité : 0, transformation : "translateY(40px)" }),
animer(250)
]),
transition(":quitter", [
animer(600, style({ opacité : 0, transformation : "translateX(100%)" }))
])
]) Remarque : Pour définir les paramètres de mouvement de l'animation, vous devez modifier un paramètre de la méthode d'animation en un type de chaîne
// temps total d'exécution de l'animation délai (facultatif) forme de mouvement (facultatif)
animate("600 ms 1s easy-out", style({ opacity : 0, transform: "translateX(100%)" })) L'animation d'images clés est définie à l'aide de la méthode keyframes
transition(":quitter", [
animer(
600,
images clés ([
style({ offset : 0,3, transformation : "translateX(-80px)" }),
style({ offset : 1, transformation : "translateX(100%)" })
])
)
]) Angular fournit deux fonctions de rappel liées à l'animation, respectivement lorsque l'animation démarre et une fois l'animation terminée.
<li @slide (@slide.start)="start($event)" (@slide.done)="done($event)"></li>
importer { AnimationEvent } depuis "@angular/animations"
début (événement : AnimationEvent) {
console.log (événement)
}
fait (événement : AnimationEvent) {
console.log (événement)
} 1. Placez la définition de l'animation dans un fichier séparé pour faciliter les appels de plusieurs composants.
importer {animer, images clés, style, transition, déclencheur} depuis "@angular/animations"
export const slide = trigger("diapositive", [
transition(":entrée", [
style({ opacité : 0, transformation : "translateY(40px)" }),
animer(250)
]),
transition(":quitter", [
animer(
600,
images clés ([
style({ offset : 0,3, transformation : "translateX(-80px)" }),
style({ offset : 1, transformation : "translateX(100%)" })
])
)
])
]) importer { slide } depuis "./animations"
@Composant({
animations : [diapo]
}) 2. Extrayez les définitions d'animation spécifiques pour faciliter plusieurs appels d'animation.
importer {animate, animation, keyframes, style, transition, trigger, useAnimation} depuis "@angular/animations"
exporter const slideInUp = animation([
style({ opacité : 0, transformation : "translateY(40px)" }),
animer(250)
])
export const slideOutLeft = animation([
animer(
600,
images clés ([
style({ offset : 0,3, transformation : "translateX(-80px)" }),
style({ offset : 1, transformation : "translateX(100%)" })
])
)
])
export const slide = trigger("diapositive", [
transition(":enter", useAnimation(slideInUp)),
transition(":quitter", useAnimation(slideOutLeft))
]) 3. Lors de l'appel d'une animation, transférez le temps total de mouvement, le temps de retard et
l'exportation de la forme de mouvement const slideInUp = animation(
[
style({ opacité : 0, transformation : "translateY(40px)" }),
animer("{{ durée }} {{ délai }} {{ assouplissement }}")
],
{
paramètres : {
durée : "400ms",
délai : "0s",
assouplissement : "assouplissement"
}
}
) transition(":enter", useAnimation(slideInUp, {params: {delay: "1s"}})) Angular fournit query pour rechercher des éléments et créer des animations pour eux
importer { slide } depuis "./animations"
animations : [
glisser,
trigger("todoAnimations", [
transition(":entrée", [
requête("h2", [
style({ transformation : "translateY(-30px)" }),
animer(300)
]),
// Interroge l'animation enfant pour exécuter query("@slide", animateChild())
])
])
] <div class="conteneur" @todoAnimations>
<h2>Tous</h2>
<ul class="list-group">
<li
@glisser
(cliquez)="removeItem(i)"
*ngFor="laisser l'élément de todos ; laisser i = index"
classe = "liste-groupe-élément"
>
{{ article }}
</li>
</ul>
</div> Par défaut, l'animation parent et l'animation enfant sont exécutées dans l'ordre. L'animation parent est exécutée en premier, puis l'animation enfant est exécutée. Vous pouvez utiliser la méthode group pour la rendre parallèle
trigger("todoAnimations", [.
transition(":entrée", [
groupe([
requête("h2", [
style({ transformation : "translateY(-30px)" }),
animer(300)
]),
requête("@slide", animateChild())
])
])
]) Angular fournit la méthode d'échelonnement pour retarder l'exécution de l'animation de chaque élément à tour de rôle lorsque plusieurs éléments exécutent la même animation en même temps.
transition(":entrée", [
groupe([
requête("h2", [
style({ transformation : "translateY(-30px)" }),
animer(300)
]),
requête("@slide", stagger(200, animateChild()))
])
]) Remarque : La méthode stagger ne peut utiliser qu'une dans la méthode de requête.
Angular fournit la méthode state pour définir l'état.
1. Analyse du code par défaut
<div class="container">
<div class="panel panel-default">
<div class="panel-heading" (click)="toggle()">
Un framework, plusieurs plateformes, mobiles et ordinateurs de bureau</div>
<div class="panel-body">
<p>
Utilisez des modèles déclaratifs simples pour implémenter rapidement diverses fonctionnalités. Étendez le langage des modèles avec des composants personnalisés et une large gamme de composants existants. Bénéficiez du support pour Angular dans presque tous les IDE
pour une aide et des commentaires instantanés. Tout cela est pour vous aider à écrire de belles applications, plutôt que de vous creuser la tête pour faire "fonctionner" le code.
</p>
<p>
Du prototype au déploiement mondial, Angular peut vous apporter le support de Google
Infrastructure et technologies hautement évolutives pour les applications à grande échelle.
</p>
<p>
Accédez au Web aujourd'hui (et demain) avec Web Workers et le rendu côté serveur
La vitesse la plus élevée possible sur la plateforme. Angular vous donne un contrôle efficace sur l'évolutivité. Basé sur RxJS, Immutable.js et d'autres modèles push, il peut s'adapter à des besoins massifs en données.
</p>
<p>
Apprendre à utiliser Angulaire
Créez des applications, puis réutilisez ce code et ces fonctionnalités dans des applications sur de nombreuses plates-formes différentes :
Web, Web mobile, applications mobiles, applications natives et applications natives de bureau.
</p>
</div>
</div>
</div>
<style>
.conteneur {
marge supérieure : 100 px ;
}
.en-tête du panneau {
curseur : pointeur ;
}
</style> importer { Composant } depuis "@angular/core"
@Composant({
sélecteur : "app-root",
templateUrl : "./app.component.html",
styles : []
})
classe d'exportation AppComponent {
isExpended : booléen = faux
basculer() {
this.isExpended = !this.isExpended
}
} 2. Créer
un déclencheur d'animation("expandCollapse", [
// Utilisez la méthode state pour définir le style correspondant à l'élément d'état replié state(
"effondré",
style({
hauteur: 0,
débordement : "caché",
paddingTop : 0,
remplissageBas : 0
})
),
// Utilisez la méthode state pour définir le style correspondant à l'élément d'état développé state("expanded", style({ height: "*", overflow: "auto" })),
// Définir la transition d'animation d'expansion("collapsed => expand", animate("400ms easy-out")),
// Définir la transition de l'animation de pliage("expanded => Kollapd", animate("400ms easy-in"))
]) <div class="panel-body" [@expandCollapse]="isExpended ? 'expanded' : 'collapsed'"></div>
1. Ajoutez un identifiant d'état à la route. Cet identifiant est l'état personnalisé lorsque la route effectue une animation
const routes : Routes = [
{
chemin: "",
composant : HomeComponent,
pathMatch : "complet",
données: {
animation : "un"
}
},
{
chemin : "à propos",
composant : À propos du composant,
données: {
animation : "deux"
}
},
{
chemin : "actualités",
composant : NewsComponent,
données: {
animation : "trois"
}
}
] 2. Obtenez l'identifiant de l'état de routage via l'objet socket de routage et transmettez l'identifiant à l'appelant de l'animation pour permettre à l'animation d'exécuter quel est l'état actuel à exécuter
<div class="routerContainer" [@routerAnimations]=" préparerRoute(sortie)" > <router-outlet #outlet="outlet"></router-outlet> </div>
importer { RouterOutlet } depuis "@angular/router"
classe d'exportation AppComponent {
préparerRoute (sortie : RouterOutlet) {
retour (
sortie &&
sortie.activatedRouteData &&
sortie.activatedRouteData.animation
)
}
} 3. Définissez routerContainer sur un positionnement relatif et définissez ses éléments enfants directs de premier niveau sur un positionnement absolu
/* styles.css */
.routerContainer {
position : relative ;
}
.routerContainer > * {
position : absolue ;
gauche : 0 ;
haut : 0 ;
largeur : 100 % ;
} 4. Créer
un déclencheur d'animation("routerAnimations", [
transition("un => deux, un => trois, deux => trois", [
query(":enter", style({ transform: "translateX(100%)", opacity: 0 })),
groupe([
requête(
":entrer",
animer(
"Facilité d'entrée de 0,4 s",
style({ transformation : "translateX(0)", opacité : 1 })
)
),
requête(
":partir",
animer(
"0,4 s de relâchement",
style({
transformation : "translateX(-100%)",
Opacité : 0
})
)
)
])
]),
transition("trois => deux, trois => un, deux => un", [
requête(
":entrer",
style({ transformation : "translateX(-100%)", opacité : 0 })
),
groupe([
requête(
":entrer",
animer(
"Facilité d'entrée de 0,4 s",
style({ transformation : "translateX(0)", opacité : 1 })
)
),
requête(
":partir",
animer(
"0,4 s de relâchement",
style({
transformation : "translateX(100%)",
Opacité : 0
})
)
)
])
])
]) Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !
Ce qui précède est : qu’est-ce que le statut ? Apprenez-en plus sur l'animation dans Angular. Pour plus d'informations, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !