Ajout d'animations CSS aux applications AngularJS

Points de base

• AngularJS prend en charge les animations CSS et JavaScript, et il est recommandé d'utiliser des animations CSS car le navigateur réduira sa priorité et ne bloquera pas les threads de traitement.
• Pour utiliser des animations dans AngularJS, vous devez inclure la bibliothèque angular-animate.js et ajouter le module ngAnimate comme dépendance. Cette bibliothèque ajoute une prise en charge de l'animation pour des instructions telles que ng-view, ng-repeat, ng-show, ng-hide et ng-class.
• L'animation peut améliorer l'expérience utilisateur en améliorant les effets de transition, en mettant en évidence les modifications des éléments et en contrôlant l'affichage des éléments. Ils peuvent être appliqués à l'aide de classes et de propriétés spécifiques dans CSS et peuvent être personnalisés pour créer des effets uniques.

AngularJS est conçu pour créer de riches applications de liaison de données Web. Animer ces applications, c'est comme ajouter des ingrédients à votre pizza préférée. L'animation embellit non seulement l'interface utilisateur, mais facilite également l'utilisation des utilisateurs. Un petit morceau d'animation dans une application peut augmenter sa richesse, ce qui est difficile à réaliser dans d'autres cas.

Maintenant, avec la puissance du réseau, il existe de nombreuses façons de créer des animations. Jusqu'à récemment, les animations n'étaient implémentées que via JavaScript. Mais maintenant, tous les navigateurs grand public prennent en charge CSS3 bien, nous pouvons utiliser CSS uniquement pour animer notre site Web.

AngularJS 1.1.5 La version bêta commence à prendre en charge l'animation. Il a subi de nombreux changements avant que la version stable de la fonctionnalité ne soit publiée dans AngularJS 1.2. Il est très facile d'ajouter ou de supprimer le support d'animation dans les applications angulaires. Cette bibliothèque fournit un excellent support pour les animations basées sur CSS et basées sur JavaScript. Bien que les animations puissent être écrites en JavaScript, l'animation CSS est recommandée. En effet, les navigateurs réduisent la priorité des animations CSS et qu'ils ne bloquent pas les threads de traitement lorsque les threads peuvent effectuer des actions importantes.

Dans cet article, nous apprendrons à utiliser les animations CSS pour rendre le comportement des directives intégrées AngularJS plus attrayantes. La portée de cet article n'inclut pas les fonctionnalités d'animation prises en charge par CSS. Vous pouvez vous référer à la chaîne CSS sur SitePoint pour plus d'informations.

débutant

Pour utiliser l'animation, nous devons inclure la bibliothèque angular-animate.js et ajouter le module ngAnimate comme dépendance dans le module comme indiqué ci-dessous:

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

Cette bibliothèque ajoute une prise en charge de l'animation pour les événements spécifiés sur les directives suivantes:

指令	事件
ng-view	enter、leave
ng-include	enter、leave
ng-switch	enter、leave
ng-if	enter、leave
ng-repeat	enter、leave、move
ng-show	add、remove
ng-hide	add、remove
ng-class	add、remove

Ces événements sont générés automatiquement lorsque des modifications de l'état d'instruction se produisent. Il convient de noter que ces événements ne seront générés que lorsque le module ngAnimate est passé comme une dépendance du module d'application. Lorsque ces événements sont tirés, ils ajoutent une classe CSS à l'élément appliqué. Le nom correspondant de la classe CSS est mentionné dans le tableau ci-dessus. Comme vous pouvez le voir, nous sommes libres de définir ce qui se passe lorsque l'événement se produit.

ng-view Animation

Lorsque l'utilisateur navigue d'une vue à une autre, l'itinéraire se résout sur le client et une partie de la page charge le nouveau contenu. Cela se produit très rapidement et parfois l'utilisateur peut penser que les changements de vue sont trop soudains. L'animation dans cette étape lissera la transition.

se référer au tableau ci-dessus, nous voyons que ng-view augmentera deux événements lorsque la vue change. Appliquons le style suivant lorsque la vue change:

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

Le CSS ci-dessus applique une transition d'assouplissement aux éléments appliqués, avec une durée de transition de 1 seconde. Cependant, les styles ci-dessus n'ont aucun effet, car nous ne spécifions pas quel attribut de l'élément à changer pendant la transition. Manipulons les valeurs de certains attributs CSS:

.view-slide-in.ng-enter {
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;

  opacity: 0.5;
  position: relative;
  opacity: 0;
  top: 10px;
  left: 20px;
}

Ce que nous devons faire maintenant, c'est appliquer la classe view-fade à la directive ng-view.

.view-slide-in.ng-enter {
  opacity: 0;
}
.view-slide-in.ng-enter.ng-enter-active {
  top: 0;
  left: 0;
  opacity: 1;
}
.view-slide-in.ng-leave.ng-leave-active {
  top: 5px;
  left: 5px;
  opacity: 1;
}
.view-slide-in.ng-leave {
  top: 0;
  left: 0;
  opacity: 0;
}

Maintenant, lorsque vous passez d'une vue à une autre, vous pourrez voir l'effet coulissant. Vous pouvez appliquer toutes les transitions et même définir votre propre animation d'images clés. Vous pouvez utiliser les transitions de vue dans votre démo pour mieux comprendre.

ng-repeat Animation

Il est presque impossible d'éviter d'utiliser ng-repeat dans les applications angularjs. Nous finissons par utiliser la plupart des fonctionnalités de cette directive, telles que la mise à jour des modèles, l'ajout ou la suppression d'éléments aux collections, l'application de tri et de filtrage des éléments. Au fur et à mesure que nous effectuons ces opérations, les éléments de la directive sont constamment déplacés et modifiés.

Appliquons des transitions linéaires sur l'opacité de l'élément pour voir les changements dans le projet.

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

Maintenant, lorsque vous faisiez quoi que ce soit sur la liste, nous verrons un mélange de l'élément s'estomper et le léger effet de gigue. Cet effet est causé par la modification de la valeur de l'attribut de position sur le côté gauche du projet dans la classe ng-move créée ci-dessus. Appliquez tout filtrage et tri aléatoire à la liste des éléments dans la démo et observez le comportement des éléments.

ng-hide Animation

L'animation

ng-hide est similaire à l'animation ng-view. La seule différence est que nous devons appliquer les classes ng-add et ng-remove au lieu de ng-enter et ng-leave. Faisons le projet dans ou sorti lorsque la directive ng-hide le montre ou la cache. La même animation peut être appliquée à ng-show en inversant l'événement.

.repeat-animation.ng-enter,
.repeat-animation.ng-leave,
.repeat-animation.ng-move {
  -webkit-transition: all linear 1s;
  -moz-transition: all linear 1s;
  -o-transition: all linear 1s;
  transition: all linear 1s;

  position: relative;
  left: 5px;
}
.repeat-animation.ng-enter {
  opacity: 0;
}
.repeat-animation.ng-enter.ng-enter-active {
  opacity: 1;
}
.repeat-animation.ng-leave {
  opacity: 1;
}
.repeat-animation.ng-leave.ng-leave-active {
  opacity: 0;
}
.repeat-animation.ng-move {
  left: 2px;
  opacity: 0.5;
}
.repeat-animation.ng-move.ng-move-active {
  left: 0;
  opacity: 1;
}

Affichez cette animation dans la démo. La case à cocher sur le côté droit de la première page se cache ou affiche certains éléments dans les doublons.

Conclusion

Alors que les navigateurs Web deviennent de plus en plus puissants, nos clients s'attendent à ce que nous tirons le meilleur parti de ces fonctionnalités et que nous leur livrions des produits de qualité. Le support d'animation dans CSS est une fonctionnalité très populaire. Écrire et utiliser des animations avec CSS est beaucoup plus facile que d'écrire quelques lignes de code JavaScript pour accomplir la même chose. J'espère que vous trouverez ce tutoriel utile et que vous avez hâte d'entendre vos commentaires.

FAQS sur l'ajout d'animations CSS dans les applications angularjs

(La partie FAQ est omise ici parce que l'article est trop long et ne correspond pas à l'objectif pseudo-original. Le contenu de la partie FAQ est très similaire au texte d'origine, et pseudo-original est difficile, Le conserver donc la réduira l'effet pseudo-original.)

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!