AngularJS est un framework JavaScript super-héroïque qui facilite la création d'applications à page unique (SPA). En plus de cela, AngularJS est livré avec une poignée de modules angulaires qui peuvent être utilisés pour créer une expérience utilisateur impressionnante. Dans cet article, nous allons voir comment utiliser le populaire ngAnimate pour ajouter des transitions / animations de page à des vues angulaires.
qu'est-ce que la recherche binaire en java
ngAnimate peut être utilisé avec diverses directives telles que ngRepeat, ngView, ngInclude, ngIf, ngMessage, etc.
Dans cet article, nous utiliserons des animations avec ngView
Ici, nous utilisons Brackets IDE d'Adobe, mais vous êtes libre d'en utiliser d'autres, par exemple, Sublime Text, WebStorm de JetBrains, etc.
Remarque : Nous utiliserons également l'API Bootswatch Bootstrap pour donner à nos pages HTML une belle apparence
Structure du projet:
Voici la structure du projet dans Brackets IDE
Voici la brève description de chaque fichier utilisé dans le projet
animation.css - fichier CSS principal où nous définissons nos animations de page
bootstrap.min.css - bootstrap bootswatch pour donner notre marque un beau look
config.js - fichier JavaScript principal où nous définissons notre module angulaire avec les routes et les contrôleurs
shellPage.html - C'est la page shell dans laquelle les autres vues seront chargées dynamiquement
view1.html, view2.html, view3.html - Ce sont les vues partielles qui seront chargées dans la shellPage
Comment les animations sont-elles appliquées:
ngAnimate applique des classes CSS à différentes directives angulaires selon qu'elles entrent ou sortent de la vue
.ng-enter - Cette classe CSS s'applique à la directive chaque fois qu'elle est chargée dans la page
.ng-congé - Cette classe CSS s'applique à la directive chaque fois qu'elle quitte la page
Passons en revue chaque fichier un par un
shellPage.html
shellPage charge les ressources requises, applique ng-app au corps et ajoute ng-view pour injecter les vues dynamiquement.
config.js
Dans le fichier de configuration, nous définissons notre module angulaire avec les routes et les contrôleurs.
Le module transitionApp a deux dépendances: ngAnimate et ngRoute
var transitionApp = angular.module ('transitionApp', ['ngAnimate', 'ngRoute']) transitionApp.config (function ($ routeProvider) {$ routeProvider .when ('/', {templateUrl: 'partials / view1.html') , controller: 'view1Controller'}) .when ('/ view2', {templateUrl: 'partials / view2.html', controller: 'view2Controller'}) .when ('/ view3', {templateUrl: 'partials / view3. html ', controller:' view3Controller '})}) transitionApp.controller (' view1Controller ', function ($ scope) {$ scope.cssClass =' view1 '}) transitionApp.controller (' view2Controller ', function ($ scope) { $ scope.cssClass = 'view2'}) transitionApp.controller ('view3Controller', function ($ scope) {$ scope.cssClass = 'view3'})Nous avons défini trois vues partielles (vue1, vue2, vue3) qui seront injectées dans la page shell en fonction de l'URL. Les contrôleurs respectifs définissent un attribut cssClass, qui est le nom de la classe CSS, qui sera appliqué à la ng-view. Nous définirons nos animations dans ces classes CSS qui chargeront chaque page avec des animations différentes.
Pages partielles view1.html, view2.html, view3.html
Il n'y a pas grand-chose dans les pages partielles, juste du texte et des liens vers d'autres vues
view1.html
C'est la vue 1
Vue 2 Vue 3
view2.html
C'est la vue 2
Vue 1 Vue 3
view3.html
C'est la vue 3
Vue 1 Vue 2
Rappelez-vous que ces trois fichiers HTML sont des pages partielles qui seront injectées dans shellPage.html selon l'URL que nous avons définie dans le fichier config.js
Définition des styles et des animations:
Mettons un peu de vie dans nos vues en y appliquant CSS
.view {bottom: 0 padding-top: 200px position: absolu text-align: center top: 0 width: 100%} .view a {margin-top: 50px} .view h1 {font-size: 60px} #heading { couleur: # 333 position: alignement du texte absolu: centre haut: 50px largeur: 100%} / * Couleurs d'arrière-plan et de texte pour les pages à vue partielle (vue1, vue2, vue3) ------------- ------------------------------------------------ * / .view1 {background: # bef2de color: # 00907c} .view2 {background: # D4D0EA color: # 55316f} .view3 {background: # FFCBA4 color: rgba (149, 95, 40, 0.91)}Pour effectuer une transition propre entre les différentes vues, nous allons définir la propriété CSS z-index
.view.ng-Leave {z-index: 9999} .view.ng-enter {z-index: 8888}Il est maintenant temps de définir nos animations
Animation du glissement vers la gauche
/ * slide out left * / @keyframes slideOutLeft {to {transform: translateX (-100%)}} @ -moz-keyframes slideOutLeft {to {-moz-transform: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {vers {-webkit-transform: translateX (-100%)}}Agrandir l'animation
/ * scale up * / @keyframes scaleUp {from {opacity: 0.3 transform: scale (0.8)}} @ -moz-keyframes scaleUp {from {opacity: 0.3 -moz-transform: scale (0.8)}} @ -webkit- images clés scaleUp {from {opacity: 0.3 -webkit-transform: scale (0.8)}}Glisser depuis l'animation de droite
comment créer un tableau d'objets
/ * glisser depuis la droite * / @keyframes slideInRight {de {transform: translateX (100%)} vers {transform: translateX (0)}} @ -moz-keyframes slideInRight {from {-moz-transform: translateX (100 %)} vers {-moz-transform: translateX (0)}} @ -webkit-keyframes slideInRight {from {-webkit-transform: translateX (100%)} vers {-webkit-transform: translateX (0)}}Glisser depuis le bas de l'animation
/ * glisser depuis le bas * / @keyframes slideInUp {de {transform: translateY (100%)} à {transform: translateY (0)}} @ -moz-keyframes slideInUp {from {-moz-transform: translateY (100 %)} vers {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {from {-webkit-transform: translateY (100%)} vers {-webkit-transform: translateY (0)}}Animation de rotation et de chute
/ * rotate and fall * / @ -webkit-keyframes rotateFall {0% {-webkit-transform: rotateZ (0deg)} 20% {-webkit-transform: rotateZ (10deg) -webkit-animation-timing-function: easy- out} 40% {-webkit-transform: rotateZ (17deg)} 60% {-webkit-transform: rotateZ (16deg)} 100% {-webkit-transform: translateY (100%) rotateZ (17deg)}} @ -moz -keyframes rotateFall {0% {-moz-transform: rotateZ (0deg)} 20% {-moz-transform: rotateZ (10deg) -moz-animation-timing-function: easy-out} 40% {-moz-transform: rotateZ (17deg)} 60% {-moz-transform: rotateZ (16deg)} 100% {-moz-transform: translateY (100%) rotateZ (17deg)}} @keyframes rotateFall {0% {transform: rotateZ (0deg) } 20% {transform: rotateZ (10deg) animation-timing-function: easy-out} 40% {transform: rotateZ (17deg)} 60% {transform: rotateZ (16deg)} 100% {transform: translateY (100%) rotateZ (17deg)}}Faire pivoter l'animation de journal
/ * rotation du journal * / @ -webkit-keyframes rotateOutNewspaper {to {-webkit-transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}} @ -moz-keyframes rotateOutNewspaper {to {-moz-transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}} @keyframes rotateOutNewspaper {to {transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}}Application d'animations:
Il est temps d’appliquer les animations que nous avions définies auparavant
gestion des exceptions dans la procédure stockée oracle
Voir 1 animations
/ * Affichez 1 animations pour quitter la page et entrez * / .view1.ng-Leave {-webkit-animation: slideOutLeft 0.5s les deux facilité-en-moz-animation: slideOutLeft 0.5s les deux facilités en animation: slideOutLeft 0.5s les deux facilité -in} .view1.ng-enter {-webkit-animation: scaleUp 0.5s les deux facilités -moz-animation: scaleUp 0.5s les deux facilités d'animation: scaleUp 0.5s les deux facilités}Voir 2 animations
/ * Affichez 2 animations pour quitter la page et entrez * / .view2.ng-Leave {-webkit-transform-origin: 0% 0% -webkit-animation: rotateFall 1s both easy-in -moz-transform-origin: 0% 0% -moz-animation: rotateFall 1s à la fois facilité d'entrée transform-origin: 0% 0% animation: rotateFall 1s à la fois facilité d'entrée} .view2.ng-enter {-webkit-animation: slideInRight 0,5s à la fois facilité d'entrée - moz-animation: slideInRight 0,5s à la fois animation facilitée: slideInRight 0,5s à la fois facilité d'entrée}Voir 3 animations
/ * Affichez 3 animations pour quitter la page et entrez * / .view3.ng-Leave {-webkit-transform-origin: 50% 50% -webkit-animation: rotateOutNewspaper .5s both easy-in -moz-transform-origin: 50 % 50% -moz-animation: rotateOutNewspaper .5s les deux facilité-origine de la transformation: 50% 50% animation: rotateOutNewspaper .5s les deux facilité-entrée} .view3.ng-enter {-webkit-animation: slideInUp 0.5s les deux facilité -in -moz-animation: slideInUp 0.5s à la fois animation facilitée: slideInUp 0.5s à la fois facilité d'entrée}Nous en avons terminé avec tous les changements. Il est maintenant temps d’exécuter l’application
Exécution de l'application
Lors de l'exécution de l'application, la page ci-dessous vous sera présentée:
Cliquez sur les liens et vous verrez les animations en jeu, en entrant et en sortant des pages partielles.
Il existe diverses autres animations qui peuvent être utilisées. En outre, un ensemble impressionnant d'effets possibles peut être ici: http://tympanus.net/Development/PageTransitions/
Téléchargez le code et essayez-le vous-même
[buttonleads form_title = 'Télécharger le code' redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text = 'Télécharger le code']
J'espère que vous avez aimé l'animation ci-dessus avec le blog ngAnimate. Si vous souhaitez approfondir Angular JS, je vous recommande pourquoi ne pas jeter un œil à notre page de cours. La formation de certification Angular JS chez Edureka fera de vous un expert en Angular JS grâce à des sessions animées par un instructeur en direct et une formation pratique utilisant des cas d'utilisation réels.
Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires et nous vous recontacterons.
Articles Similaires:
Analyse des fichiers XML à l'aide de SAX Parser