Perfectionnez-vous sur Angular

Dans le chapitre précédent, vous avez animé des éléments HTML entre deux états nommés. Mais qu'est-ce qui se passe lorsqu'on veut animer un élément qui arrive ou part du DOM ?

Il nous faut donc une façon de gérer les transitions entre l'inexistence et l'existence : entre nos états nommés et "le vide", ou void.

Laissez un commentaire

Pour mieux visualiser l'animation que vous allez créer pour l'arrivée des commentaires, je vous propose de modifier l'implémentation de  onLeaveComment  pour ajouter le commentaire laissé au tableau  comments  local.

Je vous propose l'implémentation suivante :

onLeaveComment() {
    if (this.commentCtrl.invalid) {
        return;
    }
    const maxId = Math.max(...this.comments.map(comment => comment.id));
    this.comments.unshift({
        id: maxId + 1,
        comment: this.commentCtrl.value,
        createdDate: new Date().toISOString(),
        userId: 1
    });
    this.newComment.emit(this.commentCtrl.value);
    this.commentCtrl.reset();
}

Regardons d'abord la ligne 5 ci-dessus :

const maxId = Math.max(...this.comments.map(comment => comment.id));

La fonction  Math.max  vous retourne le nombre le plus élevé d'une liste de nombres. Vous savez que vos champs  id  correspondent à des nombres, donc pour être sûr de créer un  id  unique, vous pouvez retrouver l'id  le plus élevé et ajouter 1.

Pour ce faire, vous transformez le tableau de  Comment  en tableau de  number  avec la fonction  map  .

Ensuite, puisque  Math.max  prend les arguments les uns à la suite des autres (et non dans un tableau), vous utilisez l'opérateur spread  ...  pour éclater le tableau d'id  .

Avec ce  maxId  , vous pouvez ajouter le nouveau commentaire au début du tableau  comments  avec la fonction  unshift  :

this.comments.unshift({
    id: maxId + 1,
    comment: this.commentCtrl.value,
    createdDate: new Date().toISOString(),
    userId: 1
});

Maintenant, si vous laissez un commentaire en cliquant sur le bouton, il apparaît en haut de la liste de commentaires :

Animez l'arrivée dans le DOM

Pour animer l'arrivée des commentaires dans le DOM, vous allez ajouter une  transition  un peu spéciale :

transition('void => *', [
    style({
        transform: 'translateX(-100%)',
        opacity: 0,
        'background-color': 'rgb(201, 157, 242)',
    }),
    animate('250ms ease-out', style({
        transform: 'translateX(0)',
        opacity: 1,
        'background-color': 'white',
    }))
])

D'abord, la description de la transition est  'void => *'  , ce qui signifie que vous ciblez les animations depuis "le vide" vers n'importe quel autre état. En gros, vous ciblez l'arrivée d'un élément.

Ensuite, la particularité de cette  transition  est que vous définissez des styles de départ, suivis d'une animation qui contient la description de l'animation et les styles d'arrivée. Du coup, la  transition  contient toutes les informations nécessaires à l'exécution de cette animation.

Vous pouvez remplacer  'void => *'  par son raccourci  ':enter'  qui est un poil plus lisible !

En résumé

• Pour animer l'arrivée d'un élément dans le DOM, créez une  transition  pour  'void => *'  (ou  ':enter' ).

• Le premier élément du tableau de cette transition est l'objet de styles correspondant au début de l'animation.

• Le deuxième élément est l'animation elle-même, composée de la description de l'animation suivie de l'objet de styles correspondant à la fin de l'animation.

Suivez-moi au prochain chapitre, où vous verrez comment rendre vos animations réutilisables et paramétrables !