L'animation CSS est simple et facile à utiliser, mais les scènes complexes sont extrêmement difficiles. Par exemple, modifiez la couleur d'arrière-plan du bouton lorsque la souris plane? Simple. Mais l'animation la position et la taille des éléments d'une manière haute performance et affectent la position d'autres éléments? Difficile! Cet article explorera cette question en profondeur.
Un exemple courant est de supprimer un élément d'un tas d'articles . Les éléments empilés sur le haut doivent être déplacés vers le bas pour compenser les lacunes dans les éléments retirés du bas de la pile. C'est ainsi que cela fonctionne dans la vraie vie, et les utilisateurs peuvent s'attendre à ce mouvement réaliste sur le site Web. Sinon, les utilisateurs peuvent se sentir confus ou temporairement perdus. Sur la base de l'expérience de vie, vous vous attendez à ce que quelque chose fonctionne d'une certaine manière et obtient des résultats complètement différents, et l'utilisateur peut avoir besoin de temps supplémentaire pour faire face à ce mouvement irréaliste.
Voici une interface utilisateur pour ajouter un élément (cliquer sur un bouton) ou supprimer un élément (cliquer sur un projet).
Vous pouvez légèrement masquer la mauvaise interface utilisateur en ajoutant des animations "fondues", etc., mais le résultat ne sera pas génial car la liste s'effondrera soudainement et causera les mêmes problèmes cognitifs.
L'application des animations CSS uniquement aux événements DOM Dynamic (ajoutant complètement de nouveaux éléments et supprimer complètement les éléments) est extrêmement délicat . Nous serons confrontés à ce problème directement et introduirons trois types d'animation distincts pour faire face à ce problème, qui atteignent tous l'objectif d'aider les utilisateurs à comprendre les changements dans la liste des projets. Après avoir terminé cet article, vous pourrez utiliser ces animations ou créer vos propres animations en fonction de ces concepts.
Nous couvrirons également brièvement l'accessibilité et comment faire des dispositions granulaires HTML conserver une certaine compatibilité avec des dispositifs auxiliaires aux propriétés ARIA.
Une approche très moderne (et mon préféré) est de s'estomper et de sortir verticalement selon l'endroit où ils finiront par arriver. Cela signifie également que la liste doit être «ouverte» une position (également animée) pour la faire de la place. Si un élément quitte la liste, l'espace qu'il occupe doit rétrécir.
Étant donné que nous effectuons de nombreuses opérations différentes en même temps, nous devons modifier la structure DOM pour envelopper chaque .list-item en une classe de conteneurs .list-container correctement nommée. C'est absolument crucial pour faire fonctionner notre animation.
Maintenant, ce style est peu orthodoxe, car pour que nos effets d'animation fonctionnent plus tard, nous devons styliser la liste d'une manière très spécifique, ce qui se fait au détriment de certaines pratiques CSS idiomatiques.
.liste {
Style de liste: aucun;
}
.List-Container {
curseur: pointeur;
taille de police: 3.5rem;
hauteur: 0;
Style de liste: aucun;
Position: relative;
Texte-aligne: Centre;
Largeur: 300px;
}
.List-container: pas (: premier-enfant) {
marge: 10px;
}
.List-container .List-item {
Color d'arrière-plan: # d3d3d3;
à gauche: 0;
rembourrage: 2rem 0;
Position: absolue;
en haut: 0;
Transition: toutes les 0,6 s facilités;
Largeur: 100%;
}
.add-btn {
Color en arrière-plan: transparent;
Border: 1px noir solide;
curseur: pointeur;
taille de police: 2.5rem;
marge: 10px;
rembourrage: 2rem 0;
Texte-aligne: Centre;
Largeur: 300px;
} Tout d'abord, nous utilisons margin-top pour créer un espace vertical entre les éléments de la pile. Il n'y a pas de marge en bas afin que d'autres éléments de liste puissent combler l'écart créé par les éléments de liste supprimés. De cette façon, même si nous définissons la hauteur du conteneur à zéro, il a toujours des marges en bas. L'espace supplémentaire est créé entre les éléments de liste directement sous les éléments de liste supprimés. Et le même élément de liste doit être déplacé vers le haut en réponse à la hauteur du conteneur de l'élément de liste supprimée est nul. Et parce que cet espace supplémentaire élargit encore l'écart vertical entre les éléments de la liste, nous utilisons margin-top pour empêcher que cela ne se produise.
Mais nous ne faisons cela que si le conteneur de projet en question n'est pas le premier élément de la liste. C'est pourquoi nous utilisons :not(:first-child) - il localise tout sauf le premier conteneur (Activer Selector). Nous le faisons parce que nous ne voulons pas que le premier élément de liste pousse à partir du bord supérieur de la liste. Nous voulons juste que cela se produise sur tous les éléments après cela, car ils sont directement en dessous d'un autre élément de liste, et le premier élément de liste ne l'est pas.
Maintenant, il est peu probable que cela ait un sens total, car nous ne définissons actuellement la hauteur d'aucun élément à zéro. Mais nous le ferons plus tard, afin d'obtenir l'espacement vertical entre les éléments de la liste, nous devons définir les marges comme nous l'avons fait.
Une autre chose qui vaut la peine absolute être soulignée est le fait que .list-item sont imbriqués dans leurs .list-container parents .list-container Nous le faisons pour faire flotter .list-item .list-item le haut lorsqu'il est supprimé, tout en déplaçant .list-item autres éléments. Lorsque cela se produit, .list-container (pas absolument positionné, si affecté par le DOM) effondre .list-item hauteur, permettant à d'autres .list-container .
Malheureusement, nous n'avons pas fait assez pour obtenir une liste appropriée où les éléments de liste individuelle sont empilés un par un. Au lieu de cela, tout ce que nous pouvons voir pour le moment est un .list-item , qui représente tous les éléments de liste empilés dans la même position. En effet, bien que .list-item peut avoir une certaine hauteur à travers son attribut padding , leur élément parent ne le fait pas, mais est une hauteur de zéro. Cela signifie qu'il n'y a rien dans le DOM qui sépare réellement ces éléments les uns des autres, car pour ce faire, nous avons besoin de nos .list-container .
Pour que nos conteneurs de liste correspondent exactement à la hauteur de leurs éléments enfants, nous devons utiliser JavaScript. Par conséquent, nous stockons tous les éléments de liste dans une variable. Ensuite, nous créons une fonction qui est appelée immédiatement après le chargement du script.
Cela devient une fonction qui gère la hauteur de l'élément de conteneur de liste:
const listItems = document.QuerySelectorAll ('. list-item');
fonction calculheightoflistContainer () {
};
CalculateHeightOfListContainer (); La première chose que nous faisons est d'extraire le premier élément .list-item de la liste. Nous pouvons le faire car ils sont tous de la même taille, donc peu importe l'élément que nous utilisons. Une fois que nous y accédez, nous stockons sa hauteur en pixels via la propriété clientHeight de l'élément. Après cela, nous en créons un nouveau