Animations javascript dans les applications angularjs

Points de base

• AngularJS est un excellent cadre pour créer des applications Web à une seule page, et son support d'animation est l'une de ses principales caractéristiques. Les animations JavaScript peuvent être utilisées pour ajouter des effets d'animation aux applications AngularJS.
• Les animations JavaScript angulaires personnalisées sont définies dans la méthode animation du module angulaire. Le nom d'animation commence par un point.
• L'animation peut être appliquée à diverses directives AngularJS, telles que les directives NG-View, Ng-Repeat, Ng-Hide et Custom. Par exemple, vous pouvez ajouter des animations dans la directive NG-View pour créer des effets visuels lorsque l'utilisateur bascule entre les vues; ou ajouter des animations dans la directive NG-Repeat pour indiquer visuellement lorsque des changements se produisent.
• Animation Bien qu'elle puisse rendre l'application plus vive, la surutilisation de l'animation peut faire ralentir l'application et peut submerger l'utilisateur final. Par conséquent, l'animation doit être utilisée optimisée et stratégiquement.

AngularJS est un framework riche en fonctionnalités pour la création d'applications Web d'une seule page qui fournissent toutes les fonctionnalités dont vous avez besoin pour créer des applications riches et interactives. L'une des principales caractéristiques d'Angular est sa prise en charge de l'animation.

Nous pouvons animer une partie de l'application pour indiquer des modifications qui se produisent. Dans mon dernier article, j'ai introduit le support des animations CSS dans les applications angulaires. Dans cet article, nous apprendrons à utiliser JavaScript pour ajouter des animations aux applications AngularJS.

Dans Angular, la seule différence entre les animations CSS et JavaScript est la façon dont elles sont définies. Il n'y a aucune différence dans la façon dont les animations définies sont utilisées. Tout d'abord, nous devons charger le module Nganate dans le module racine de l'application.

angular.module('coursesApp', ['ngAnimate']);

Les événements d'animation à traiter dans les animations JavaScript restent également inchangés. Ce qui suit est une liste de commandes qui prennent en charge l'animation et leurs événements pour différentes opérations:

Instructions Événements ng-visue Entrez, laissez ng-include Entrez, laissez ng-switch entrez, laissez ng-if Entrez, quitter ng-repeat entrez, partez, déplacez-vous ng-show ajouter, supprimer ng-hide ajouter, supprimer ng-classe ajouter, supprimer La liste ci-dessus est la même que celle du post précédent, mais ne mentionne pas les classes CSS correspondantes car nous n'en avons pas besoin pour définir des animations JavaScript. Ces événements ne sont générés que lorsque le module d'application charge le module Nganate. Voyons maintenant comment animer certaines directives.

angular.module('coursesApp', ['ngAnimate']);

Lorsque vous écrivez des animations JavaScript dans AngularJS, rappelez-vous les points suivants:

1. Le nom d'animation commence par un point (.).
2. Chaque opération d'animation accepte deux paramètres:
   • un objet qui est l'élément DOM actuel qui appliquera l'animation. Si jQuery n'est pas chargé avant que AngularJS ne soit chargé, c'est un objet JQLite; sinon c'est un objet jQuery.
   • La fonction de rappel appelée une fois l'animation terminée. Le fonctionnement de l'instruction sera interrompu avant d'appeler la fonction Terminée.

Nous avons de nombreuses bibliothèques JavaScript telles que jQuery, Greensock, Anima, etc., qui simplifient le travail d'écriture d'animations. Pour plus de simplicité, j'utilise jQuery pour créer des animations dans cet article. Pour en savoir plus sur d'autres bibliothèques, vous pouvez visiter leurs sites Web respectifs.

Ajouter animé à Ng-View

Les animes sont appliqués à la directive NG-View lorsque l'utilisateur bascule entre les vues de l'application AngularJS. Comme indiqué dans le tableau ci-dessus, nous pouvons ajouter des animations lorsque la vue entre ou part. Il n'est pas nécessaire de gérer les deux cas; nous pouvons ajouter des animations pour des situations qui semblent nécessaires.

Les animations suivantes produiront des effets visuels lorsque la vue entre dans la page:

angular.module('coursesApp').animation('.name-of-animation', function(<injectables></injectables>) {
  return {
    event: function(elem, done){
      // 动画逻辑
      done();
    }
  };
});

Le code ci-dessus créera un effet glissant lorsque la vue entre dans la page. La méthode terminée est passée en tant que rappel. Il s'agit d'indiquer que l'animation est terminée et que le cadre peut désormais passer à l'opération suivante.

Veuillez noter comment la méthode animate() est appelée. Nous n'avons pas à convertir des éléments en objets jQuery, car la bibliothèque jQuery est chargée avant le chargement d'AngularJS.

Maintenant, nous devons appliquer cette animation à la directive NG-View. Bien que l'animation soit définie en JavaScript, par convention, nous utilisons des classes sur la directive cible pour l'appliquer.

courseAppAnimations.animation('.view-slide-in', function () {
  return {
    enter: function(element, done) {
      element.css({
        opacity: 0.5,
        position: "relative",
        top: "10px",
        left: "20px"
      })
      .animate({
        top: 0,
        left: 0,
        opacity: 1
        }, 1000, done);
    }
  };
});

Ajouter animé à Ng-Repeat

Ng-Repeat est l'une des instructions les plus importantes, qui offre de nombreuses options. Les deux opérations de base de cette instruction sont le filtrage et le tri. Selon le type d'opération effectué, les éléments sous l'instruction seront ajoutés, supprimés ou déplacés.

appliquons une animation de base afin que l'utilisateur puisse voir lorsque des modifications se produisent.

<div class="view-slide-in" ng-view=""></div>

Ajouter animé à ng-hide

ng-hide ajoute ou supprime la classe CSS Hide Ng sur l'élément cible. Pour appliquer des animations, nous devons gérer la situation où nous ajoutons et supprimons les classes CSS. Le nom de classe sera transmis à la classe du gestionnaire d'animation. Cela nous permet de vérifier la classe et de prendre les mesures appropriées.

Ce qui suit est un exemple de code d'animation qui s'estompe ou s'estompe dans les éléments lorsque la directive NG-Hide est activée ou désactivée:

courseAppAnimations.animation('.repeat-animation', function () {
  return {
    enter : function(element, done) {
      console.log("entering...");
      var width = element.width();
      element.css({
        position: 'relative',
        left: -10,
        opacity: 0
      });
      element.animate({
        left: 0,
        opacity: 1
      }, done);
    },
    leave : function(element, done) {
      element.css({
        position: 'relative',
        left: 0,
        opacity: 1
      });
      element.animate({
        left: -10,
        opacity: 0
      }, done);
    },
    move : function(element, done) {
      element.css({
        left: "2px",
        opacity: 0.5
      });
      element.animate({
        left: "0px",
        opacity: 1
      }, done);
    }
  };
});

Ajouter des commandes personnalisées animées

Pour ajouter des animations aux directives personnalisées, nous devons utiliser le service $animate. Bien que $animate fasse partie du cadre Core AngularJS, Nganimate doit être chargé pour profiter du service.

Avec la même démo que dans le post précédent, nous afficherons une page avec une liste de cours. Nous créons une directive qui affiche les détails du cours dans une boîte, et après avoir cliqué sur le lien "Afficher les statistiques", le contenu de la boîte changera. Ajoutons une animation pour que l'utilisateur puisse voir la transition.

Lorsque la transition se produit, nous ajouterons une classe CSS, que nous supprimerons une fois l'animation terminée. Voici le code de cette directive:

angular.module('coursesApp', ['ngAnimate']);

Comme vous pouvez le voir, nous effectuons l'action une fois l'animation terminée. Lors de la vérification des éléments de directive dans les outils de développeur de navigateur, nous verrons que les classes qui commutant acactives et commutateurs sont ajoutées et supprimées très rapidement. Nous pouvons définir les transitions CSS ou personnaliser les animations JavaScript pour voir les animations qui se produisent. Voici un exemple de transition CSS qui peut être utilisé avec les directives ci-dessus (pour la brièveté, les préfixes des fournisseurs sont omis):

angular.module('coursesApp').animation('.name-of-animation', function(<injectables></injectables>) {
  return {
    event: function(elem, done){
      // 动画逻辑
      done();
    }
  };
});

ou, ce qui suit est une animation jQuery qui peut être utilisée pour la même instruction:

courseAppAnimations.animation('.view-slide-in', function () {
  return {
    enter: function(element, done) {
      element.css({
        opacity: 0.5,
        position: "relative",
        top: "10px",
        left: "20px"
      })
      .animate({
        top: 0,
        left: 0,
        opacity: 1
        }, 1000, done);
    }
  };
});

Une de ces animations peut être appliquée aux directives personnalisées, tout comme nous appliquons des animations aux directives intégrées.

<div class="view-slide-in" ng-view=""></div>

Vous pouvez afficher les effets réels de toutes les animations ci-dessus sur la page de démonstration.

Conclusion

L'animation peut rendre l'application plus vive si elle est utilisée correctement et fonctionnellement. Comme nous pouvons le voir, AngularJS prend en charge les animations CSS et JavaScript richement. Vous pouvez choisir l'un d'eux en fonction de la situation de l'équipe.

Cependant, une utilisation intensive de l'animation peut entraîner le ralentissement de l'application et l'application semble être surdimensionnée pour l'utilisateur final. Par conséquent, cette arme doit être utilisée avec prudence et optimisation.

FAQ sur les animations javascript dans les applications angularjs (FAQ)

Comment créer des animations de base dans AngularJS?

La création d'une animation de base dans AngularJS implique plusieurs étapes. Tout d'abord, vous devez inclure la bibliothèque d'animation AngularJS dans votre projet. Cela peut être réalisé en ajoutant une référence au fichier "angular-animate.js" dans le fichier html. Ensuite, vous devez injecter le module "Nganatem" dans votre application AngularJS. Cela peut être réalisé en ajoutant "Nganate" comme dépendance dans le module d'application. Après avoir fait cela, vous pouvez créer des animations à l'aide de la classe CSS et de la directive AngularJS. Par exemple, vous pouvez utiliser les classes "ng-enter" et "ng-leave" pour animer un élément lorsqu'il entre ou quitte le DOM.

Quels sont les composants clés de l'animation angularjs?

L'animation AngularJS se compose principalement de deux composantes clés: CSS et JavaScript. CSS est utilisé pour définir le style et les transitions des animations, tandis que JavaScript est utilisé pour contrôler le temps et l'ordre des animations. Dans AngularJS, les animations sont créées en associant des classes CSS à des directives AngularJS spécifiques telles que "Ng-Repeat", "Ng-Switch" et "Ng-View". Ces directives ajoutent et suppriment automatiquement les classes CSS associées au bon moment, vous permettant de créer des animations complexes avec un code JavaScript minimal.

Comment contrôler l'heure de l'animation dans AngularJS?

Les transitions CSS et les animations peuvent être utilisées pour contrôler le temps des animations dans AngularJS. En spécifiant les attributs de "durée de transition" ou de "durée d'animation" dans la classe CSS, vous pouvez contrôler la durée de l'animation. De plus, vous pouvez utiliser les attributs "transition-retard" ou "animation-delay" pour contrôler l'heure de début de l'animation. Ces propriétés peuvent être spécifiées en secondes ou en millisecondes (MS).

Puis-je créer des animations dans AngularJS en utilisant JavaScript?

Oui, vous pouvez créer des animations dans AngularJS à l'aide de JavaScript. Bien que CSS soit souvent utilisé pour des animations simples, JavaScript peut être utilisé pour des animations plus complexes qui nécessitent un contrôle précis sur le calendrier et l'ordre des animations. Dans AngularJS, vous pouvez contrôler les animations par programme à l'aide du service "$ animate". Ce service fournit des méthodes pour ajouter, supprimer et interroger les classes CSS, vous permettant de créer des animations complexes à l'aide de JavaScript.

Comment animer les éléments lors de l'entrée ou de la sortie du Dom dans AngularJS?

Dans AngularJS, vous pouvez utiliser les classes "ng-enter" et "ng-leave" pour animer un élément lorsqu'il entre ou quitte le dom. AngularJS ajoute et supprime automatiquement ces classes lorsque les éléments entrent ou quittent le DOM. En définissant des transitions ou des animations CSS pour ces classes, vous pouvez créer des animations qui déclenchent lorsqu'un élément entre ou quitte le DOM.

Comment utiliser l'animation angularjs avec "Ng-Repeat"?

Vous pouvez utiliser AngularJS Animation avec "Ng-Repeat" en associant la classe CSS à la directive "Ng-Repeat". Lorsqu'un élément est ajouté ou supprimé de la liste «Ng-Repeat», AngularJS ajoute et supprime automatiquement la classe CSS associée, déclenchant l'animation correspondante. Par exemple, vous pouvez utiliser les classes "ng-enter" et "ng-leave" pour animer le projet lorsqu'il est ajouté ou supprimé d'une liste.

Puis-je utiliser AngularJS Animation avec "Ng-Switch"?

Oui, vous pouvez utiliser AngularJS Animation avec "Ng-Switch". Semblable à "Ng-Repeat", vous pouvez associer une classe CSS à la directive "Ng-Switch" pour créer une animation. Lorsque la condition "Ng-Switch" change, AngularJS ajoute et supprime automatiquement la classe CSS associée, déclenchant l'animation correspondante.

Comment utiliser l'animation AngularJs avec "Ng-View"?

Vous pouvez utiliser AngularJS Animation avec "NG-View" en associant la classe CSS à la directive "NG-View". Lorsque la vue change, AngularJS ajoute et supprime automatiquement la classe CSS associée, déclenchant l'animation correspondante. Cela peut être utilisé pour créer des animations de transition de page dans les applications AngularJS.

Puis-je utiliser des animations AngularJS avec des directives personnalisées?

Oui, vous pouvez utiliser AngularJS Animations avec des directives personnalisées. En utilisant le service "$ animate" dans la fonction de liaison de la directive, vous pouvez ajouter, supprimer et interroger les classes CSS pour créer des animations complexes à l'aide de JavaScript.

Comment déboguer AngularJs Animation?

Vous pouvez utiliser des outils de développeur de navigateur pour déboguer les animations AngularJS. En vérifiant les éléments d'animation dans le DOM, vous pouvez voir quelles classes CSS AngularJS ajoutent et suppriment. De plus, vous pouvez activer ou désactiver l'animation à l'aide de la méthode "activée" du service "$ animate", qui est très utile pour le débogage.

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!