web-dev-qa-db-fra.com

AngularJS - Transitions d'animation-visualisation

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

Un exemple de ceci peut être trouvé sur la page d'accueil d'AngularJS sous Connecter un backend .

Ma question : Existe-t-il un moyen d’animer la transition entre welcome.html et login.html?

javascriptangularjsanimationurl-routing
52
Greg

Angularjs 1.1.4 a maintenant introduit le ng-animate directive pour aider à animer différents éléments, en particulier ng-view.

Vous pouvez aussi regarder la vidéo sur cette nouvelle featue

[~ # ~] met à jour [~ # ~] à partir d'angularjs 1.2, le mode de travail des animations a radicalement changé, la plupart d'entre elles sont désormais contrôlées avec CSS , sans avoir à configurer les callbacks javascript, etc. Vous pouvez vérifier le tutoriel mis à jour sur Year Of Moo . @dfsq a souligné dans les commentaires a Bel ensemble d'exemples .

69
Mortimer

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;
}

HTML page principale:

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

Exemple HTML partiels:

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

Je ne suis pas sûr de pouvoir le faire directement avec AngularJS, mais vous pouvez définir l’affichage sur no pour les messages de bienvenue et de connexion et animer l’opacité avec une directive une fois qu’ils sont chargés.

Je le ferais comme ça. 2 Directives de fondu dans le contenu et le fondu en fondu lorsqu'un lien est cliqué. La directive relative aux fondus peut tout simplement animer un élément avec un identifiant unique ou appeler un service qui diffuse le fondu.

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);
  });
    }
  });

Un service:

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

J'ai juste mis en place ce code rapidement, il peut donc y avoir des bugs :)

5
F Lekschas

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

1
ice.cube