Animation angulaire pour des états spécifiques

Question

Je souhaite créer différentes animations pour un changement d'état spécifique. Je suis basé sur ce point: https://scotch.io/tutorials/animating-angularjs-apps-ngview et il fonctionne correctement, mais je veux quelque chose comme ceci:

• état passe de A à B - vue sur la glissière de gauche à droite
• Etat est passé de B à C - vue sur la glissière de droite à gauche
• état passe de C à A - vue sur la glissière de haut en bas
• autrement - vues de diapositives de bas en haut

En ce moment j'ai quelque chose comme ceci - toutes les vues se déplacent de droite à gauche. Lorsque je clique sur le bouton « Retour » dans mon application alors .main-app est ajoutée la classe .back mais j'ai bien l'animation (de gauche à droite) que sur l'élément .ng-leave et .ng-enter ont même animation comme toujours (droite à gauche)

$animateTime: .5s; 
.main-app.ng-enter { position: absolute; top: 0; left: 0; animation: slideInRight $animateTime both ease-in; } 
.main-app.ng-leave { position: absolute; top: 0; left: 0; animation: slideOutLeft $animateTime both ease-in; } 

.main-app.ng-enter.back { position: absolute; top: 0; left: 0; animation: slideInLeft $animateTime both ease-in; } 
.main-app.ng-leave.back { position: absolute; top: 0; left: 0; animation: slideOutRight $animateTime both ease-in; } 

J'ai essayé quelque chose comme ceci:

$rootScope.$on('$stateChangeSuccess', function(event, to, toParams, from, fromParams) { 
    if(from.name == 'A' && to.name == 'B') { 
     $('.main-app').addClass('animation-from-top-to-bottom'); 
    } 
}); 

Mais avec ce script encore seul élément .ng-leave fonctionne comme je veux, .ng-enter ont l'animation par défaut.

Answer 1

je l'ai réalisé avec ceci: https://docs.angularjs.org/api/ngAnimate/service/ $ animeCSS

Je sauverai état précédent avec ce code

$rootScope.$on('$stateChangeSuccess', function(event, to, toParams, from, fromParams) { 
    $rootScope.$previousState.state = from; 
    $rootScope.$previousState.stateParams = fromParams; 
}); 

Et ce code est qui décide ce que l'animation doit être utilisé

angular.module('app').animation('.main-app', ['$animateCss', '$rootScope', '$state', 
    function ($animateCss, $rootScope, $state) { 
     var duration = '.25s'; 

     return { 
      enter: function (element, doneFn) { 
       var from = $rootScope.$previousState.state; 
       var to = $state.current; 

       var animationName; 

       if (from.name === 'A' && to.name === 'B') { 
        animationName = 'fadeIn'; 
       } else { 
        animationName = 'zoomIn'; 
       } 

       return $animateCss(element, { 
        keyframeStyle: duration + ' ' + animationName + ' linear' 
       }); 
      }, 
      leave: function (element, doneFn) { 
       var from = $rootScope.$previousState.state; 
       var to = $state.current; 

       var animationName; 

       if (from.name === 'A' && to.name === 'B') { 
        animationName = 'fadeOut'; 
       } else { 
        animationName = 'zoomOut'; 
       } 

       return $animateCss(element, { 
        keyframeStyle: duration + ' ' + animationName + ' linear' 
       }); 
      } 
     }; 
    }]);