Intégrer des bibliothèques d'animation tierces à un projet

La création d'animations et de transitions basées sur CSS peut être un défi. Ils peuvent être complexes et longs. Besoin d'aller de l'avant avec un projet avec peu de temps pour modifier la transition parfaite? Considérez une bibliothèque d'animation CSS tierce avec des animations prêtes à l'emploi en attente d'être utilisée. Pourtant, vous pensez peut-être: que sont-ils? Que proposent-ils? Comment les utiliser?

Eh bien, découvrons.

Une (sorte de) brève histoire de: planer

Une fois, le concept d'un état de volants était un exemple trivial de ce qui est offert aujourd'hui. En fait, l'idée d'avoir une réaction au curseur passant au-dessus d'un élément était plus ou moins inexistante. Différentes façons de fournir cette fonctionnalité ont été proposées et implémentées. Cette petite fonctionnalité, en quelque sorte, a ouvert la porte à l'idée que CSS soit capable d'animations pour des éléments sur la page. Au fil du temps, la complexité croissante possible avec ces fonctionnalités a conduit aux bibliothèques d'animation CSS.

Dreamweaver de Macromedia a été introduit en décembre 1997 et a offert ce qui était une fonctionnalité simple, un échange d'image sur le plan de volants. Cette fonctionnalité a été implémentée avec une fonction JavaScript qui serait intégrée dans le HTML par l'éditeur. Cette fonction a été nommée mm_swapimage () et est devenue un peu de folklore de conception Web. C'était un script facile à utiliser, même en dehors de Dreamweaver, et sa popularité a conduit à ce qu'il soit encore utilisé aujourd'hui. Dans mes recherches initiales pour cet article, j'ai trouvé une question concernant cette fonction de 2018 sur Adobe Dreamweaver (Adobe a acquis Macromedia en 2005) Help Forum.

La fonction JavaScript échangerait une image avec une autre image en modifiant l'attribut SRC en fonction des événements MouseOver et Mouseout . Lorsqu'il est mis en œuvre, cela ressemblait à ceci:

 <a href="#" onmouseout="mm_swapimGrestore ()" onmouseover="mm_swapimage ('ImageName', '', 'newimage.jpg', 1)">
  <img  src="originalMage.jpg" name="ImageName"    style="max-width:90%"  style="max-width:90%" border="0" alt="Intégrer des bibliothèques d'animation tierces à un projet" >
</a>

Selon les normes d'aujourd'hui, il serait assez facile de l'accomplir avec JavaScript et beaucoup d'entre nous pourraient pratiquement le faire dans notre sommeil. Mais considérez que JavaScript était encore ce nouveau langage de script à l'époque (créé en 1995) et se réalisa parfois différemment d'un navigateur à l'autre. La création de JavaScript de croisement n'a pas toujours été une tâche facile et tout le monde ne créant pas de pages Web a même écrit JavaScript. (Bien que cela ait certainement changé.) Dreamweaver a offert cette fonctionnalité via un menu de l'éditeur et le concepteur Web n'avait même pas besoin d'écrire le javascript. Il était basé sur un ensemble de «comportements» qui pouvaient être sélectionnés dans une liste d'options différentes. Ces options pourraient être filtrées par un ensemble de navigateurs ciblés; 3,0 navigateurs, 4,0 navigateurs, IE 3.0, IE 4.0, Netscape 3.0, Netscape 4.0. Ah, le bon vieux temps.

Environ un an après la sortie de Dreamweaver, la spécification CSS2 de W3C a mentionné: planer dans un projet de travail daté de janvier 1998. Il a été spécifiquement mentionné en termes de liens d'ancrage, mais la langue suggère qu'elle aurait pu être appliquée à d'autres éléments. Dans la plupart des fins, il semblerait que ce sélecteur pseudo serait le début d'une alternative facile à mm_swapimage (), car l'image de fond était dans le même projet. Bien que l'assistance du navigateur ait été un problème car il a fallu des années avant que suffisamment de navigateurs aient correctement pris en charge CSS2 pour en faire une option viable pour de nombreux concepteurs de sites Web. Il y avait enfin une recommandation W3C de CSS2.1, cela pourrait être considéré comme la base du CSS «moderne» tel que nous le connaissons, qui a été publié en juin 2011.

Au milieu de tout cela, JQuery est arrivé en 2006. Heureusement, JQuery a grandement contribué à simplifier le JavaScript parmi les différents navigateurs. Une chose d'intérêt pour notre histoire, la première version de jQuery a offert la méthode Animate (). Avec cette méthode, vous pouvez animer les propriétés CSS sur n'importe quel élément à tout moment; Pas seulement sur le plan de volants. Par sa popularité, cette méthode a exposé la nécessité d'une solution CSS plus robuste dans le navigateur - une solution qui ne nécessiterait pas une bibliothèque JavaScript qui n'était pas toujours très performante en raison des limitations du navigateur.

La pseudo-classe de survol n'a offert qu'un échange dur d'un état à un autre sans support pour une transition en douceur. Cela ne pouvait pas non plus animer des changements dans les éléments en dehors de quelque chose d'aussi basique que de planer sur un élément. La méthode Animate () de JQuery a offert ces fonctionnalités. Cela a ouvert la voie et il n'y avait pas de retour. Au fur et à mesure que les choses se passent dans le monde dynamique du développement Web, un projet de travail pour résoudre ce problème était bien avancé avant la publication de la recommandation de CSS2.1. Le premier projet de travail pour CSS Transitions Module Level 3 a été publié pour la première fois par le W3C en mars 2009. Le premier projet de travail pour le module d'animations CSS Level 3 a été publié à peu près en même temps. Ces deux modules CSS sont toujours dans un statut de projet de travail en octobre 2018, mais bien sûr, nous en utilisons déjà

Donc, ce qui a commencé comme une fonction JavaScript fournis par un tiers, juste pour un simple état de volants, a conduit à des transitions et des animations dans CSS qui permettent des animations élaborées et complexes - la complexité que de nombreux développeurs ne souhaiteraient pas nécessairement considérer car ils doivent se déplacer rapidement sur de nouveaux projets. Nous avons bouclé la boucle; Aujourd'hui, de nombreuses bibliothèques d'animation CSS tierces ont été créées pour compenser cette complexité.

Trois types différents de bibliothèques d'animation tierces

Nous sommes dans ce nouveau monde capable d'animations puissantes, excitantes et complexes dans nos pages et applications Web. Plusieurs idées différentes sont venues au premier plan de la façon d'approcher ces nouvelles tâches. Ce n'est pas qu'une seule approche est meilleure que toute autre; En effet, il y a beaucoup de chevauchement dans chacun. La différence est davantage sur la façon dont nous implémentons et écrivons du code pour eux. Certains sont des bibliothèques JavaScript à part entière, tandis que d'autres sont des collections CSS uniquement.

Bibliothèques javascript

Les bibliothèques qui fonctionnent uniquement via JavaScript offrent souvent des capacités au-delà de ce que fournissent les animations CSS courantes. Habituellement, il y a un chevauchement car les bibliothèques peuvent réellement utiliser les fonctionnalités CSS dans le cadre de leur moteur, mais cela serait abstrait en faveur de l'API. Des exemples de telles bibliothèques sont Greensock et Anime.js. Vous pouvez voir l'étendue de ce qu'ils offrent en regardant les démos qu'ils fournissent (Greensock a une belle collection sur Codepen). Ils sont principalement destinés à des animations très complexes, mais peuvent également être utiles pour des animations plus basiques.

Bibliothèques JavaScript et CSS

Il existe des bibliothèques tierces qui incluent principalement des cours CSS mais fournissent un peu de JavaScript pour une utilisation facile des cours dans vos projets. Une bibliothèque, Micron.js, fournit à la fois une API JavaScript et des attributs de données qui peuvent être utilisés sur les éléments. Ce type de bibliothèque permet une utilisation facile des animations pré-construites que vous pouvez simplement sélectionner. Une autre bibliothèque, Motion UI, est destinée à être utilisée avec un framework JavaScript. Bien que cela fonctionne également sur une notion similaire de mélange d'une API JavaScript, de classes prédéfinies et d'attributs de données. Ces types de bibliothèques fournissent des animations prédéfinies et un moyen facile de les câbler.

Bibliothèques CSS

Le troisième type de bibliothèque est uniquement CSS. En règle générale, ce n'est qu'un fichier CSS que vous chargez via une balise de liaison dans votre HTML. Vous appliquez et supprimez ensuite des classes CSS spécifiques pour utiliser les animations fournies. Deux exemples de ce type de bibliothèque sont Animate.css et animista. Cela dit, il existe même des différences majeures entre ces deux bibliothèques particulières. Animate.css est un package CSS total tandis que Animista fournit une interface lisse pour choisir les animations que vous souhaitez avec du code fourni. Ces bibliothèques sont souvent faciles à mettre en œuvre, mais vous devez écrire du code pour les utiliser. Ce sont le type de bibliothèques sur lesquelles cet article se concentrera.

Trois types différents d'animations CSS

Oui, il y a un modèle; La règle des trois est partout, après tout.

Dans la plupart des cas, il existe trois types d'animations à considérer lors de l'utilisation de bibliothèques tierces. Chaque type convient à un objectif différent et a des façons différentes de les utiliser.

Animations en volants

Ces animations sont destinées à être impliquées dans une sorte d'État de survol. Ils sont souvent utilisés avec des boutons, mais une autre possibilité consiste à les utiliser pour mettre en évidence les sections sur lesquelles le curseur se trouve. Ils peuvent également être utilisés pour les états de mise au point.

Animations d'attention

Ces animations sont destinées à être utilisées sur des éléments qui sont normalement en dehors du centre visuel de la personne qui consulte la page. Une animation est appliquée à une section de l'écran qui nécessite une attention. De telles animations pourraient être de nature subtile pour des choses qui nécessitent une attention éventuelle mais pas de nature terrible. Ils pourraient également être très distrayants lorsque l'attention immédiate est nécessaire.

Animations de transition

Ces animations sont souvent destinées à avoir un élément en remplacer une autre dans la vue, mais peuvent également être utilisées pour un élément. Ceux-ci comprendront généralement une animation pour «quitter» la vue et l'animation miroir pour «saisir» la vue. Pensez à s'évanouir et à s'estomper. Ceci est généralement nécessaire dans les applications d'une seule page car une section de données passerait à un autre ensemble de données, par exemple.

Alors, passons en revue des exemples de chacun de ces types d'animations et comment on pourrait les utiliser.

Faisons de l'avant!

Certaines bibliothèques peuvent déjà être définies pour des effets de survol, tandis que certains ont des états de volants comme objectif principal. Une telle bibliothèque est Hover.css, qui est une solution de dépôt qui fournit une belle gamme d'effets de survol appliqués via les noms de classe. Parfois, cependant, nous voulons utiliser une animation dans une bibliothèque qui ne supporte pas directement la pseudo-classe de survol, car cela pourrait entrer en conflit avec les styles mondiaux.

Pour cet exemple, j'utiliserai l'animation TADA que Fourni.css Animate.css doit. Il est davantage en tant que chercheur d'attention, mais cela suffira bien pour cet exemple. Si vous deviez parcourir le CSS de la bibliothèque, vous constaterez qu'il n'y a pas de pseudo-classe à trouver. Donc, nous devrons le faire fonctionner de cette manière par nous-mêmes.

La classe Tada en soi est simplement la suivante:

 .Tada {
  nom d'animation: tada;
}

Une approche à faible déluge pour réagir à un état de volants est de faire notre propre copie locale de la classe, mais de l'étendre un peu. Normalement, Animate.CSS est une solution de dépôt, nous n'aurons donc pas nécessairement la possibilité de modifier le fichier CSS d'origine; Bien que vous puissiez avoir votre propre copie locale du fichier si vous le souhaitez. Par conséquent, nous créons uniquement le code dont nous avons besoin pour être différent et laissons la bibliothèque gérer le reste.

 .Tada-Hover: Hover {
  nom d'animation: tada;
}

Nous ne devrions probablement pas remplacer le nom de classe d'origine au cas où nous voulons réellement l'utiliser ailleurs. Ainsi, au lieu de cela, nous faisons une variation que nous pouvons placer: planer la pseudo-classe sur le sélecteur. Maintenant, nous utilisons simplement la classe animée requise de la bibliothèque avec notre classe Tada-Hover personnalisée sur un élément et il jouera cette animation sur Hover.

Si vous ne vouliez pas créer une classe personnalisée de cette manière, mais préférez une solution JavaScript à la place, il existe un moyen relativement facile de gérer cela. Curieusement, c'est une méthode similaire à la méthode mm_imageswap () de Dreamweaver dont nous avons discuté plus tôt.

 // Sélectionnons les éléments avec id #js_example
var js_example = document.QuerySelector ('# js_example');

// Lorsque les éléments avec ID #js_example sont planés ...
js_example.addeventListener ('MouseOver', function () {
  // ... Ajoutons deux classes à l'élément: animé et tada ...
  this.classList.add («animé», «tada»);
});
// ... puis supprimez ces classes lorsque la souris n'est pas sur l'élément.
js_example.addeventListener ('Mouseout', function () {
  this.classlist.remove («animé», «tada»);
});

Il existe en fait plusieurs façons de gérer cela, selon le contexte. Ici, nous créons des auditeurs d'événements pour attendre les événements de souris et de souris. Ces auditeurs s'appliquent et suppriment ensuite les classes animées et TADA de la bibliothèque selon les besoins. Comme vous pouvez le voir, étendre un peu une bibliothèque tiers pour répondre à nos besoins peut être accompli de manière relativement facile.

Puis-je avoir votre attention s'il vous plaît?

Un autre type d'animation que les bibliothèques tierces peuvent aider sont les demandeurs d'attention. Ces animations sont utiles lorsque vous souhaitez attirer l'attention sur un élément ou une section de la page. Quelques exemples de cela pourraient être des notifications ou des entrées de formulaire requises non remplies. Ces animations peuvent être subtiles ou directes. Subtil pour quand quelque chose nécessite une attention éventuelle mais n'a pas besoin d'être résolu immédiatement. Direct pour quand quelque chose a besoin de résolution maintenant.

Certaines bibliothèques ont de telles animations dans l'ensemble du package, tandis que certains sont construits spécifiquement à cet effet. Animate.css et animista ont des animations à la recherche d'attention, mais ce ne sont pas l'objectif principal de ces bibliothèques. Un exemple de bibliothèque construit à cet effet serait CSShake. La bibliothèque à utiliser dépend des besoins du projet et du temps que vous souhaitez investir dans leur mise en œuvre. Par exemple, CSShake est prêt à aller avec peu de problèmes de votre part - appliquez simplement les cours au besoin. Bien que, si vous utilisiez déjà une bibliothèque comme Animate.css, vous ne voudrez probablement pas introduire une deuxième bibliothèque (pour les performances, la dépendance aux dépendances, etc.).

Ainsi, une bibliothèque telle que Animate.css peut être utilisée mais a besoin d'un peu plus de configuration. La page GitHub de la bibliothèque propose des exemples de comment procéder. Selon les besoins d'un projet, la mise en œuvre de ces animations en tant que demandeurs d'attention est plutôt simple.

Pour un type d'animation subtil, nous pourrions en avoir un qui répète simplement un nombre de fois et des arrêts. Cela consiste généralement à ajouter les classes de la bibliothèque, à appliquer une propriété d'itération d'animation à CSS et à attendre l'événement de fin d'animation pour effacer les classes de la bibliothèque.

Voici un exemple simple qui suit le même schéma que nous avons examiné plus tôt pour les états de survol:

 var pulse = document.QuerySelector ('# Pulse');

fonction playPulse () {
  pulse.classList.add («animé», «Pulse»);
}

pulse.addeventListener ('AnimationEnd', fonction () {
  pulse.classlist.remove («animé», «Pulse»);
});

playPulse ();

Les classes de bibliothèque sont appliquées lorsque la fonction PlayPulse est appelée. Il y a un écouteur d'événements pour l'événement AnimationEnd qui supprimera les classes de la bibliothèque. Normalement, cela ne jouerait qu'une seule fois, mais vous voudrez peut-être répéter plusieurs fois avant de vous arrêter. Animate.css ne fournit pas de classe pour cela, mais il est assez facile d'appliquer une propriété CSS pour que notre élément le gérera.

 #pulse {
  compte d'animation-itération: 3; / * S'arrêter après trois fois * /
}

De cette façon, l'animation jouera trois fois avant de s'arrêter. Si nous devions arrêter l'animation plus tôt, nous pouvons supprimer manuellement les classes de bibliothèque en dehors de la fonction AnimationEnd. La documentation de la bibliothèque fournit en fait un exemple de fonction réutilisable pour appliquer les classes qui les suppriment après l'animation; très similaire au code ci-dessus. Il serait même assez facile de l'étendre pour appliquer le nombre d'itération à l'élément.

Pour une approche plus directe, disons une animation infinie qui ne s'arrêtera qu'après une sorte d'interaction utilisateur. Imaginons que cliquer sur l'élément est ce qui recommence l'animation et cliquer à nouveau l'arrête. Gardez à l'esprit que, comme vous souhaitez commencer et arrêter l'animation dépend de vous.

 var bounce = document.QuerySelector ('# Bounce');

Bounce.addeventListener ('click', function () {
  if (! Bounce.classList.Contains ('Animated')) {
    Bounce.classList.add («Animated», «Bounce», «Infinite»);
  } autre {
    Bounce.classList.remove («Animated», «Bounce», «Infinite»);
  }
});

Assez simple. En cliquant sur l'élément, les tests si la classe «animée» de la bibliothèque a été appliquée. Si ce n'est pas le cas, nous appliquons les classes de bibliothèque afin qu'elle commence l'animation. S'il a les classes, nous les supprimons pour arrêter l'animation. Remarquez cette classe infinie à la fin de la liste de classe. Heureusement, Animate.CSS fournit cela pour nous prêt à l'emploi. Si votre bibliothèque de choix n'offre pas une telle classe, c'est ce dont vous avez besoin dans votre CSS:

 #rebond {
  Animation-iteration-Count: Infinite;
}

Voici une démo montrant comment ce code se comporte:

Déplacer des trucs à l'écart

Lors de la recherche pour cet article, j'ai constaté que les transitions (à ne pas confondre avec les transitions CSS) sont facilement le type d'animations les plus courantes dans les bibliothèques tierces. Ce sont des animations simples qui sont conçues pour permettre à un élément d'entrer ou de quitter la page. Un modèle très courant vu dans les applications modernes à page unique est d'avoir un élément quitter la page tandis qu'un autre le remplace en entrant dans la page. Pensez au premier élément qui s'estompe et à la deuxième disparaître. Cela pourrait être de remplacer les anciennes données par de nouvelles données, de passer au panneau suivant dans une séquence ou de passer d'une page à une autre avec un routeur. Sarah Drasner et Georgy Marchuk ont ​​d'excellents exemples de ces types de transitions.

Pour la plupart, les bibliothèques d'animation ne fourniront pas les moyens de supprimer et d'ajouter des éléments pendant les animations de transition. Les bibliothèques qui fournissent un JavaScript supplémentaire peuvent en fait avoir cette fonctionnalité, mais comme la plupart ne le font pas, nous discuterons de la façon de gérer cette fonctionnalité maintenant.

Insérer un seul élément

Pour cet exemple, nous utiliserons à nouveau Animate.css comme bibliothèque. Dans ce cas, j'utiliserai l'animation Fadeindown.

Maintenant, gardez à l'esprit qu'il existe de nombreuses façons de gérer l'insertion d'un élément dans le DOM et je ne souhaite pas les couvrir ici. Je vais juste montrer comment tirer parti d'une animation pour rendre l'insertion plus agréable et plus naturelle que l'élément qui apparaît simplement. Pour animate.css (et probablement de nombreuses autres bibliothèques), l'insertion d'un élément avec l'animation est assez facile.

 Selt insertElement = Document.CreateElement ('div');
insertElement.innerText = 'Ce div est inséré';
insertement.classlist.add («animé», «fadeInDown»);

insertement.addeventListener ('AnimationEnd', function () {
  this.classlist.remove ('animé', 'fadeindown');
});

document.body.append (insertElement);

Cependant, vous décidez de créer l'élément n'a pas grand-chose d'importance; Il vous suffit de vous assurer que les classes nécessaires sont déjà appliquées avant d'insérer l'élément. Ensuite, cela s'animera bien en place. J'ai également inclus un auditeur d'événements pour l'événement AnimationEnd qui supprime les classes. Comme d'habitude, il existe plusieurs façons de procéder et c'est probablement le moyen le plus direct de le gérer. La raison de la suppression des classes est de faciliter l'inverser le processus si nous le souhaitons. Nous ne voudrions pas que l'animation entre en concurrence avec une animation quittant.

Supprimer un seul élément

La suppression d'un seul élément est en quelque sorte similaire à l'insertion d'un élément. L'élément existe déjà, nous appliquons donc simplement les classes d'animation souhaitées. Ensuite, lors de l'événement AnimationEnd, nous supprimons l'élément du DOM. Dans cet exemple, nous utiliserons l'animation Fadeoutdown de Animate.css car cela fonctionne bien avec l'animation Fadeindown.

 LET REPOreElement = Document.QuerySelector ('# devoieElement');

retireElement.addeventListener ('AnimationEnd', fonction () {
  this.remove ();
});

devoyelement.classList.add («animé», «fadeoutdown»);

Comme vous pouvez le voir, nous ciblons l'élément, ajoutons les classes et supprimons l'élément à la fin de l'animation.

Un problème avec tout cela est qu'avec l'insertion et la suppression des éléments de cette façon, les autres éléments de la page sautent pour s'adapter. Vous devrez en tenir compte d'une manière ou d'une autre, probablement avec CSS et la disposition de la page pour garder un espace constant pour les éléments.

Sortez de mon chemin, je viens!

Maintenant, nous allons échanger deux éléments, l'un partant tandis qu'un autre entre. Il existe plusieurs façons de gérer cela, mais je vais fournir un exemple qui combine essentiellement les deux exemples précédents.

Je vais passer en revue le javascript en parties pour expliquer comment cela fonctionne. Tout d'abord, nous mettons en cache une référence à un bouton et le conteneur pour les deux éléments. Ensuite, nous créons deux boîtes qui seront échangées à l'intérieur du conteneur.

 LET Button = document.QuerySelector ('Button');
Selt Container = Document.QuerySelector ('. Container');
LET BOX1 = Document.CreateElement ('Div');
LET BOX2 = Document.CreateElement ('Div');

J'ai une fonction générique pour supprimer les classes d'animation pour chaque événement AnimationEnd.

 LET ROUVERCLASSES = fonction () {
  box1.classlist.remove («animé», «fadeuTright», «fadeinleft»);
  box2.classlist.remove («animé», «fadeuTright», «fadeinleft»);
}

La fonction suivante est la majeure partie de la fonctionnalité d'échange. Tout d'abord, nous déterminons la boîte actuelle affichée. Sur la base de cela, nous pouvons déduire les éléments de départ et d'entrée. L'élément de départ obtient l'écouteur d'événements qui a appelé la fonction Switchements supprimée en premier, nous ne nous trouvons pas dans une boucle d'animation. Ensuite, nous supprimons l'élément de départ du conteneur depuis que son animation est terminée. Ensuite, nous ajoutons les classes d'animation à l'élément entrant et l'ajoutons au conteneur afin qu'il s'anime en place.

 Laissez switchements = fonction () {
  Laissez CurrentElement = Document.QuerySelector ('. Container .box');
  Laissez LeleshElement = currentElement.classList.Contains ('Box1')? Box1: Box2;
  Laissez entéRelement = LeaveLelement === Box1? Box2: Box1;
  
  LeleshElement.RemoveEventListener («AnimationEnd», Switchements);
  LETTERELENT.REMOVE ();
  enterelement.classlist.add («animé», «fadeinleft»);
  contener.append (Enterement);
}

Nous devons faire une configuration générale pour les deux cases. De plus, nous ajoutons la première boîte au conteneur.

 box1.classlist.add ('box', 'box1');
box1.addeventListener («AnimationEnd», RemoveClasses);
box2.classList.add ('box', 'box2');
box2.AddeventListener ('AnimationEnd', reposoveclasses);

contener.ApendChild (Box1);

Enfin, nous avons un écouteur d'événements de clic pour notre bouton qui fait le basculement. La façon dont ces séquences d'événements sont démarrées dépend techniquement de vous. Pour cet exemple, j'ai décidé d'un simple clic de bouton. Je détermine quelle boîte est actuellement affichée, qui va partir, pour appliquer les classes appropriées pour que l'animer. Ensuite, j'applique un écouteur d'événements pour l'événement AnimationEnd qui appelle la fonction Switchements indiquée ci-dessus qui gère l'échange réel.

 Button.AdDeventListener ('click', function () {
  Laissez CurrentElement = Document.QuerySelector ('. Container .box');
  
  if (currentElement.classList.Contains ('Box1')) {
    box1.classlist.add («animé», «fadeUtright»);
    box1.addeventListener («AnimationEnd», Switchements);
  } autre {
    box2.classList.add («animé», «fadeuTright»);
    box2.addeventListener («AnimationEnd», Switchements);
  }
}

Un problème évident avec cet exemple est qu'il est extrêmement codé pour cette seule situation. Cependant, il peut être facilement étendu et ajusté pour différentes situations. Ainsi, l'exemple est utile en termes de compréhension d'une façon de gérer une telle tâche. Heureusement, certaines bibliothèques d'animation, comme MotionUi, fournissent un peu de javascript pour aider les transitions des éléments. Une autre chose à considérer est que certains frameworks JavaScript, tels que Vuejs, ont des fonctionnalités pour aider à l'animation des transitions d'éléments.

J'ai également créé un autre exemple qui fournit un système plus flexible. Il se compose d'un conteneur qui stocke les références pour laisser et entrer des animations avec des attributs de données. Le conteneur contient deux éléments qui changeront les places sur la commande. La façon dont cet exemple est construit est que les animations sont facilement modifiées dans les attributs de données via JavaScript. J'ai également deux conteneurs dans la démo; L'un utilisant Animate.css et l'autre utilisant Animista pour les animations. C'est un grand exemple, donc je n'examinerai pas le code ici; Mais il est fortement commenté, alors jetez un coup d'œil si cela est intéressant.

Prenez un moment pour considérer…

Tout le monde veut-il réellement voir toutes ces animations? Certaines personnes pourraient considérer nos animations excessives et inutiles, mais pour certains, ils peuvent en fait causer des problèmes. Il y a quelque temps, WebKit a introduit la requête médiatique préfabriquée en mouvement réduit pour aider aux éventuels problèmes de troubles du spectre vestibulaire. Eric Bailey a également publié une belle introduction à la requête médiatique, ainsi qu'un suivi avec des considérations pour les meilleures pratiques. Lisez-les définitivement.

Alors, votre bibliothèque d'animation de choix prend-elle en charge le mouvement préfabriqué? Si la documentation ne le dit pas, vous devrez peut-être supposer que ce n'est pas le cas. Bien qu'il soit assez facile de vérifier le code de la bibliothèque pour voir s'il y a quelque chose pour la requête multimédia. Par exemple, Animate.css l'a dans le fichier partiel _base.scss.

 @media (print), (préfère le mouvement réduit) {
  .animation {
    Animation: Unset! IMPORTANT;
    Transition: Aucun! IMPORTANT;
  }
}

Ce bit de code fournit également un excellent exemple de la façon de le faire par vous-même si la bibliothèque ne le prend pas en charge. Si la bibliothèque a une classe commune qu'il utilise - comme Animate.css utilise «animé» - alors vous pouvez simplement cibler cette classe. S'il ne prend pas en charge une telle classe, vous devrez cibler la classe d'animation réelle ou créer votre propre classe personnalisée à cet effet.

 .Scale-up-Center {
  Animation: Scale-Up-Center 0,4 s cube-Bezier (0,390, 0,575, 0,565, 1.000);
}

@KeyFrames Scale-Up-Center {
  0% {transform: échelle (0,5); }
  100% {transform: échelle (1); }
}

@media (print), (préfère le mouvement réduit) {
  .Scale-up-Center {
    Animation: Unset! IMPORTANT;
    Transition: Aucun! IMPORTANT;
  }
}

Comme vous pouvez le voir, je viens d'utiliser l'exemple tel que fourni par Animate.css et ciblé la classe d'animation d'Animista. Gardez à l'esprit que vous devrez répéter ceci pour chaque classe d'animation que vous choisissez d'utiliser dans la bibliothèque. Bien que, dans la pièce de suivi d'Eric, il suggère de traiter toutes les animations comme une amélioration progressive et cela pourrait être une façon de réduire le code et de faire une expérience utilisateur plus accessible.

Laissez un cadre faire le gros du travail pour vous

À bien des égards, les différents cadres tels que React et Vue peuvent faciliter l'utilisation de l'animation CSS tiers que avec Vanilla JavaScript, principalement parce que vous n'avez pas à câbler les swaps de classe ou les événements d'animation et d'animation manuellement. Vous pouvez tirer parti des fonctionnalités que les cadres fournissent déjà. La beauté de l'utilisation de cadres est qu'ils fournissent également plusieurs façons différentes de gérer ces animations en fonction des besoins du projet. Les exemples ci-dessous ne sont qu'un petit exemple d'options.

Effets de survol

Pour les effets de survol, je suggère de les installer avec CSS (comme je l'ai suggéré ci-dessus) comme la meilleure façon de procéder. Si vous avez vraiment besoin d'une solution JavaScript dans un cadre, comme Vue, ce serait quelque chose comme ceci:

 <button mouseover="Over ($ Event, 'Tada')" mouseleave="LETT ($ Event, 'Tada')">
  tada
 bouton></button>

 Méthodes: {
  sur: fonction (e, type) {
    e.target.classList.add («animé», type);
  },
  quitter: fonction (e, type) {
    e.target.classList.Remove («Animated», type);
  }
}

Pas vraiment très différent de la solution JavaScript de vanille ci-dessus. De plus, comme auparavant, il existe de nombreuses façons de gérer cela.

Demandeurs d'attention

La mise en place des chercheurs d'attention est en fait encore plus facile. Dans ce cas, nous appliquons simplement les classes dont nous avons besoin, encore une fois, en utilisant Vue comme exemple:

 <div:> Pulse 

<div:> rebond </div:></div:>

Dans l'exemple d'impulsion, chaque fois que l'ispulse booléen est vrai, les deux classes sont appliquées. Dans l'exemple de rebond, chaque fois que le booléen isbounce est vrai, les classes animées et rebond sont appliquées. La classe infinie est appliquée malgré tout afin que nous puissions avoir notre rebond sans fin jusqu'à ce que le booléen Isbounce retourne à False.

Transitions

Heureusement, le composant de transition de Vue offre un moyen facile d'utiliser des classes d'animation tierces avec des classes de transition personnalisées. D'autres bibliothèques, telles que React, pourraient offrir des fonctionnalités ou des modules complémentaires similaires. Pour utiliser les classes d'animation dans Vue, nous les implémentez simplement dans le composant de transition.

 <transition enter-actif- laisse-actif- mode="out-in">
  <div v-if="toggle" key="if"> if Exemple  div>
  <div v-else key="else"> else Exemple </div>
transition><p> En utilisant Animate.css, nous appliquons simplement les classes nécessaires. Pour enter-actif, nous appliquons la classe animée requise avec Fadeindown. Pour les congés, nous appliquons la classe animée requise avec Fadeoutdown. Pendant la séquence de transition, ces classes sont insérées aux moments appropriés. Vue gère l'insertion et la suppression des classes pour nous.</p>
<p> Pour un exemple plus complexe d'utiliser des bibliothèques d'animation tierces dans un cadre JavaScript, explorez ce projet: </p>
<p data-height="532" style="height: 532px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;" data-theme- data-default-tab="result" data-user="talmand" data-slug-hash="KLKdJy" data-pen-title="KLKdJy"></p>
<p></p>
<h3 id="Rejoignez-la-fête"> Rejoignez la fête!</h3>
<p> Il s'agit d'un petit goût des possibilités qui attendent votre projet car il existe de nombreuses bibliothèques d'animation CSS tierces à explorer. Certains sont approfondis, excentriques, spécifiques, désagréables ou tout simplement simples. Il existe des bibliothèques pour des animations JavaScript complexes telles que Greensock ou Anime.js. Il y a même des bibliothèques qui cibleront les caractères dans un élément.</p>
<p> J'espère que tout cela vous inspirera à jouer avec ces bibliothèques sur le chemin de la création de vos propres animations CSS.</p>
</div></transition>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!