Je suis un programmeur débutant, et j'ai récemment commencé à apprendre Angular 4. J'essaie de créer un site personnel et je veux ajouter quelques animations.Angular 2+ Animation- Changement de couleur sur l'élément de corps
En haut de la page, j'ai un jumbotron avec un logo. Je le veux de telle sorte que lorsque je clique sur ce logo, la couleur de fond du corps change, mais il semble que la fonction déclenche l'élément.
Voici mon code sur tapuscrit: (Code ne produit pas une erreur, il ne fonctionne tout simplement pas ce que je voulais faire..)
@Component({
selector: 'main-jumbotron',
templateUrl: './jumbotron.component.html',
styleUrls: ['./jumbotron.component.css'],
animations: [
trigger("changeBodyColor", [
state('off', style({
backgroundColor: '#CCFFCC'
})),
state('on', style({
backgroundColor: '#3A3A38'
})),
transition('off => on', [animate('2s')]),
transition('on => off', [animate('2s')])
])
]
})
export class JumbotronComponent implements OnInit {
// other private instance data, constructor here, ngOnInit etc.
colorState: string = 'off';
toggleColor() {
console.log('triggered ' + this.colorState);
this.colorState = (this.colorState === 'off') ? 'on' : 'off';
}
}
Quand je mets [@changeBodyColor] = "colorState "Dans l'élément div du jumbotron, l'animation fonctionne, mais il suffit de changer la couleur de fond du jumbotron, évidemment. Quand je mets cela sur l'élément body à partir de index.html, la fonction est déclenchée (connectée sur la console), mais la couleur ne change pas. J'ai l'impression que c'est un problème avec la hiérarchie DOM. Si quelqu'un a une idée de ce que le problème pourrait être, s'il vous plaît faites le moi savoir!
N'est-ce pas parce que index.html n'est pas votre modèle HTML? Pour autant que je sache, vous n'avez aucun contrôleur sur index.html. – trichetriche
Oui, mais je me demande comment je peux atteindre l'élément du corps. C'est bizarre parce que j'essaie d'atteindre le parent de l'enfant. –
Je pense que si vous voulez animer le corps, vous devriez le faire à la main au lieu d'utiliser angulaire. – trichetriche