AngularJS - Transitions d'animation-visualisation

Question

J'ai 2 pages html, welcome.html et login.html qui sont tous deux des "insérée" dans index.html dependending sur l'URL via un ngview d'attribut et le routeur du fournisseur, dans le cadre de mon application AngularJS.

Un exemple de ceci peut être trouvé sur le AngularJS page d'accueil en vertu de Fil d'un Backend.

Ma question: Est-il un moyen pour animer la transition entre welcome.html et login.html?

Answer 1

Angularjs 1.1.4 a présenté l' ng-animate directive pour aider à l'animation de différents éléments, en particulier ng-view.

Vous pouvez également regarder la vidéo sur cette nouvelle fonctionnalité

Mise à JOUR de angularjs 1.2, la façon dont les animations de travail a radicalement changé, il est maintenant contrôlé par le CSS, sans avoir à l'installation javascript rappels, etc.. Vous pouvez vérifier la mise à jour de tutoriel sur l'Année De Moo. @dfsq souligné dans les commentaires une belle série d'exemples.

Answer 2

Vérifiez ce code:

Javascript :

 app.config( ["$routeProvider"], function($routeProvider){
    $routeProvider.when("/part1", {"templateUrl" : "part1"});
    $routeProvider.when("/part2", {"templateUrl" : "part2"});
    $routeProvider.otherwise({"redirectTo":"/part1"});
  }]
);

function HomeFragmentController($scope) {
    $scope.$on("$routeChangeSuccess", function (scope, next, current) {
        $scope.transitionState = "active"
    });
}
 

CSS :

 .fragmentWrapper {
    overflow: hidden;
}

.fragment {
    position: relative;
    -moz-transition-property: left;
    -o-transition-property: left;
    -webkit-transition-property: left;
    transition-property: left;
    -moz-transition-duration: 0.1s;
    -o-transition-duration: 0.1s;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s
}

.fragment:not(.active) {
    left: 540px;
}

.fragment.active {
    left: 0px;
}
 

Page principale HTML :

 <div class="fragmentWrapper" data-ng-view data-ng-controller="HomeFragmentController">
</div>
 

Exemple HTML partiel :

 <div id="part1" class="fragment {{transitionState}}">
</div>
 

Answer 3

Je ne suis pas sûr au sujet d'un moyen de le faire directement avec AngularJS mais vous pouvez régler l'affichage à aucun de bienvenue et de connexion et d'animer l'opacité avec une directive, une fois qu'ils sont chargés.

Je le ferais d'une certaine façon comme. 2 Directives pour la décoloration dans le contenu et la décoloration, il lorsque le lien est cliqué. La directive pour fadeouts pourrait simplement animer un élément avec un ID unique ou un service qui diffuse la fadeout

Modèle:

<div class="tmplWrapper" onLoadFadeIn>
    <a href="somewhere/else" fadeOut>
</div>

Directives:

angular
  .directive('onLoadFadeIn', ['Fading', function('Fading') {
    return function(scope, element, attrs) {
      $(element).animate(...);
      scope.$on('fading', function() {
    $(element).animate(...);
      });
    }
  }])
  .directive('fadeOut', function() {
    return function(scope, element, attrs) {
      element.bind('fadeOut', function(e) {
    Fading.fadeOut(e.target);
  });
    }
  });

Service:

angular.factory('Fading', function() {
  var news;
  news.setActiveUnit = function() {
    $rootScope.$broadcast('fadeOut');
  };
  return news;
})

J'ai juste mis le code rapidement, donc il peut y avoir quelques bugs :)

Answer 4

Essayez de vérifier son post. Il montre comment mettre en œuvre des transitions entre des pages Web à l'aide de ngRoute et ngAnimate d'AngularJS: comment effectuer des transitions de page Web de style iPhone à l'aide d'AngularJS & CSS