Implémentez les effets d'animation JavaScript dans les applications angularjs
AngularJS est un riche ensemble de cadres pour créer des applications Web d'une seule page, apportant toutes les fonctions requises à la création d'applications riches et interactives. L'une des principales caractéristiques est qu'Angular supporte l'animation.
Nous pouvons utiliser des animations dans une partie du contenu de l'application pour montrer que certains changements se produisent. Dans mon dernier article, j'ai parlé du support des animations CSS dans les applications angulaires. Dans cet article, nous verrons comment utiliser les scripts JavaScript pour générer des effets d'animation dans les applications AngularJS.
Dans Angular, la seule différence entre CSS et JavaScript est leur définition. Il n'y a aucune différence qui empêche l'utilisation de l'animation définie. Tout d'abord, nous devons charger le module Nganate dans le module racine de notre application.
angular.module ('CoursesApp', ['nganimate']);
Tous les événements d'animation JavaScript à traiter restent inchangés. Voici une liste d'animations directement prises en charge et leurs comportements différents correspondants:
Ensemble d'événements d'instruction
Ng-View
ng inclure
interrupteur ng
ng-si entrez
Partir
Ng-Repeat Entrée
Partir
se déplacer
ng-spectacle
norme
Add de classe Ng
Retirer
La liste ci-dessus est la même que dans l'article précédent, mais ne mentionne pas les classes CSS correspondantes car nous n'avons pas besoin de les utiliser pour définir des animations JavaScript. Tous ces événements ne se produiront qu'après que le module d'application a chargé le module Nganate. Voyons maintenant comment faire bouger ces instructions.
Syntaxe pour les animations angulaires personnalisées
Voici un cadre de base pour les animations JavaScript personnalisées:
angular.module ('CoursesApp'). Animation ('. Name-of-Animation', fonction (<Nejectables>) {return {event: function (elem, fait) {// Logic of Animation Done ();}};});Voici quelques points clés à retenir lors de la rédaction d'animations JavaScript dans AngularJS:
1. Le nom de l'animation commence par un point (.)
2. Tous les comportements d'animation acceptent deux paramètres:
• Un objet dans l'élément DOM qui est sur le point d'exécuter l'animation est soit un objet JQLite qui a été chargé avant que AngularJS ne soit chargé, soit un objet jQuery.
• Une fonction de rappel à la fin d'une animation. L'action correspondant à l'instruction est interrompue jusqu'à ce que la fonction de rappel soit appelée.
Nous avons plusieurs bibliothèques JavaScript, telles que JQuery, Greensock, Anima et plusieurs autres bibliothèques qui facilitent l'écriture d'animations. Pour rester simple, j'utilise jQuery pour créer des animations dans ce post. Pour apprendre plusieurs autres bibliothèques, vous pouvez visiter leurs sites Web correspondants.
Laissez Ng-View bouger
L'animation utilisée sur une directive NG-View s'exécute lors de la commutation des vues des applications AngularJS.
Voici l'effet visuel causé par une animation lorsqu'une vue apparaît:
CourseAppanImations.animation ('. View-Slide-in', fonction () {return {Entrée: fonction (élément, fait) {élément.css ({Opacité: 0,5, position: "relatif", en haut: "10px", à gauche: "20px"}) .animate ({top: 0, gauche: 0, opacité: 1}, 1000, fait);Ce qui précède crée un effet glissant lorsqu'une vue entre dans l'écran. La méthode terminée est transmise sous forme de fonction de rappel. Il s'agit de montrer que l'animation est terminée et maintenant le framework AngularJS peut continuer avec la prochaine action.
Notez la méthode où la méthode animate () est appelée. Nous n'avons pas à convertir cet élément en un objet jQuery, car jQuery est déjà chargé avant de charger AngularJS.
Nous devons maintenant appliquer cet effet d'animation à la directive NG-View. Bien que cette animation soit définie dans JavaScript, nous utilisons une balise de classe pour l'appliquer à la directive cible comme convenu.
Animation NG-Repeat
Parmi les instructions que vous pouvez choisir d'utiliser, Ng-Repeat est une commande très importante. Il existe deux autres instructions de fonctionnement de base: le filtrage et le tri. Ajouter, déplacer ou supprimer les instructions correspondantes en fonction des actions effectuées.
Ce qui suit démontre l'utilisation de certaines animations de base, et lorsque des changements se produisent, vous pouvez voir les effets d'animation correspondants.
CoursAppanImations.animation ('. Repeat-Animation', Function () {return {Enter: function (élément, Done) {Console.log ("En entrée ..."); Var Width = Element.Width (); élément.css. Fonction (élément, fait) {élément.css ({position: 'relative', gauche: 0, opacité: 1}); élément.animate ({Left: -10, élément.css ({gauche: "2px", opacité: 0,5}); fait); } };});Animation ng-hidé
La directive NG-Hide est utilisée pour ajouter ou supprimer la classe de style NG-Hide de l'élément cible. Pour utiliser une animation, nous devons souvent ajouter ou supprimer les styles CSS. Passez le nom de classe à la classe de traitement d'animation pour réaliser cet effet. Cela nous permet de vérifier cette classe et d'apporter des modifications appropriées au code.
Ce qui suit est un exemple de code d'animation, en utilisant la directive NG-Hide pour réaliser l'effet de décoloration et d'affichage progressif des éléments:
CoursAppanImations.animation ('. Hide-Animation', fonction () {return {beFoReaddClass: function (élément, className, Done) {if (className === 'ng-hide') {element.animate ({Opacité: 0}, 500, Done);} else {Done ();}}, RemoveClass: fure (classname === 'ng-hide') {élément.css ('opacité', 0);Laissez les commandes personnalisées bouger
Afin de rendre les directives personnalisées animées, nous devons utiliser le service $ animate. Bien que le service Animate $ fasse partie du cadre Core AngularJS, Nganimate doit être chargé avant que ce service puisse jouer son plus grand rôle.
En utilisant le même exemple de l'article précédent, nous présenterons une liste de cours d'une page. Nous créons une commande pour afficher les détails du cours dans la grille, et le contenu de la grille changera lorsque vous cliquez sur le lien "Afficher les statistiques". Ajoutons une animation pour présenter cet effet de conversion à l'utilisateur.
Lorsque l'animation de transformation commencera, nous ajouterons une balise de classe CSS, et à la fin, supprimez cette balise de classe. Voici l'exemple de code de cette directive:
app.directive ('CourseDetails', fonction ($ animate) {return {scope: true, templateUrl: 'CourseDeTails.html', lien: function (scope, elem, attrs) {scope.viewDetails = true; elem.find ('bouton'). bind ('click', function () {$ animate.addclass (elem, "swing ', function () {$ animate.adddclass (elem," Switching ", function () {$ Animate. {elem.removeclass ("Switching");Comme vous pouvez le voir, nous effectuons cette action à la fin de l'animation. Dans les outils de développeur du navigateur, lorsque nous examinons les éléments de directive, nous constatons que les deux balises de classe, le changement actif et le commutateur ADD, sont rapidement ajoutées puis supprimées. Nous pouvons afficher les effets de l'animation en définissant un style de conversion CSS ou une animation JavaScript personnalisée. Voici un style de conversion CSS simple qui peut être utilisé pour les instructions susmentionnées. Pour plus de simplicité, nous avons supprimé des préfixes spécifiques:
.det-anim.switching {transition: tous 1s linéaire; Position: relative; Opacité: 0,5; à gauche: -20px;}Ou, voici une animation écrite par jQuery qui peut être utilisée pour la même instruction:
CoursAappanimations.animation ('. JS-ANIM', fonction () {return {beFoReaddClass: function (element, className, Done) {if (className === 'Switching') {element.animate ({Opacité: 0}, 1000, function () {element.css ({OPACITAL: 1}); Done ();); }}}});Dans ces animations, si elle peut être appliquée aux instructions intégrées, elle peut également être appliquée aux instructions personnalisées:
<div Course-Details> / div>
Vous pouvez voir les effets de toutes les animations ci-dessus en cours d'exemple.
en conclusion
L'animation, lorsqu'elle est appropriée et correctement utilisée, apportera la colère à l'application. Comme nous l'avons vu, AngularJS fournit divers supports pour les animations CSS et JavaScript. Vous pouvez choisir l'un d'eux en fonction de la situation de l'équipe.
Cependant, l'utilisation de trop d'animation ralentira l'application, ce qui rendra l'application inutile pour les utilisateurs. Par conséquent, vous devez être prudent et optimisé pour utiliser cette arme.