AngularJS - Animer ng-view transitions

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

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

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

InformationsquelleAutor Greg | 2012-10-26
  1. 69

    Angularjs 1.1.4 a présenté le ng-animer de la 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 comme d'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 l' mis à jour le tutoriel sur l'Année De Moo. @dfsq souligné dans les commentaires un belle série d'exemples.

    • à partir de maintenant je ne peux pas trouver 1.1.4 pour le téléchargement. Je suppose qu'ils ont raté le 3 avril date de sortie?
    • c'est ici, je suppose qu'ils ont oublié de mettre à jour leur site, mais si vous allez sur le lien de téléchargement dans la barre de menu du haut, vous pouvez le trouver.
    • il a obtenu, merci!
    • il y a un bon tuto ici : yearofmoo.com/2013/04/animation-in-angularjs.html
    • 1.2 modifications de rendre ce chemin plus facile, il y a la mise à jour post par yearofmoo vous devez vérifier yearofmoo.com/2013/08/...
    • J'ai également créé une démonstration de ngView animation qui pourrait être intéressant pour case.
    • Il serait bon de mettre à jour cette réponse w/ matière 1,2 (beaucoup de changements), puisqu'il est sélectionné & le premier, les gens le verront.
    • mise à jour avec vos commentaires. Merci

    InformationsquelleAutor Mortimer
  2. 16

    Vérifier 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;
}

    Principal de la page HTML:

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

    Partiels exemple de code HTML:

    <div id="part1" class="fragment {{transitionState}}">
</div>
    • ce est assez bon. Juste une question: la vue précédente disparaît avant que celui-ci apparaît, de sorte qu'il n'a pas vraiment de transition par rapport à la vue précédente. sur artcopycode.com ils semblent ne pas utiliser des vues pour le routage, mais ont des directives pour chaque fragment, qui sont tous chargés à partir du début.
    • artcopycode.com ne quelque chose de totalement différent de la rubrique, beaucoup plus facile à exécuter.
    • c'était mon point de vue, de faire ce qui est demandé dans le sujet: insérer différents fragments dans une page unique application, et d'animer le changement de fragments. Mais au lieu d'utiliser une ng-view et animer entre le point de vue (qui n'est pas facile que l'ancien point de vue est retiré de la DOM avant que le nouveau point de vue est dans l'), ils utilisent des directives (pour garder les contrôleurs et les modèles) dans leur acheminement.
    InformationsquelleAutor madhead
  3. 5

    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 quelque sorte, comme si. 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 🙂

    • Pourriez-vous adapter votre réponse vers l'utilisation de ng-view et la transition entre les pages html? merci!
    • Je n'ai aucune idée de ce que tu veux dire par la couture vers ng-view. Je pense que ng-view n'est pas capable de transitions. Je ne suis pas sûr, mais vous pourriez améliorer la ng-view de la directive OU de créer votre propre helper de directives, comme indiqué ci-dessus. Si vous chargez la bienvenue à la onLoadFadeIn directive peut s'estomper dans votre code html et après avoir cliqué sur un lien, il sera disparu. Quoi de plus avez-vous besoin?
    • oui, je pense que j'aimerais le ng-view directive qui a incorporé directement. Merci pour votre temps.
    • Je pense que dans ce cas, je voudrais créer un nouveau ng-view et de l'améliorer avec la disparition de la fonctionnalité 🙂
    InformationsquelleAutor F Lekschas
  4. 1

    Essayez de vérifier son poste. Il montre comment mettre en œuvre les transitions entre les pages web en utilisant AngularJS est ngRoute et ngAnimate: Comment Faire iPhone de Style de la Page Web des Transitions en Utilisant AngularJS & CSS

    InformationsquelleAutor
  5. -1

    1.Installer angulaires-animer

    2.Ajouter l'effet de l'animation de la classe ng-enter pour la page de saisie de l'animation et de la classe ng-leave pour la page de quitter l'animation

    de référence: cette page est une ressource gratuite sur angulaire vue de transition https://e21code.herokuapp.com/angularjs-page-transition/

    InformationsquelleAutor Rohit Vinay