web-dev-qa-db-de.com

AngularJS - Animieren Sie ng-view Übergänge

Ich habe 2 HTML-Seiten, welcome.html und login.html Beide werden "eingefügt" in index.html abhängig von der URL über ein ngview Attribut und einen Router-Provider als Teil meiner AngularJS-App.

Ein Beispiel dafür finden Sie auf der AngularJS-Homepage unter Verbinden Sie ein Backend .

Meine Frage : Gibt es eine Möglichkeit, den Übergang zwischen welcome.html und login.html?

52
Greg

Angularjs 1.1.4 hat jetzt das ng-animate Direktive zur Unterstützung der Animation verschiedener Elemente, insbesondere von ng-view.

Sie können sich auch das Video über diese neue Funktion ansehen

[~ # ~] Update [~ # ~] Ab Version 1.2 hat sich die Funktionsweise von Animationen drastisch geändert. Das meiste davon wird jetzt mit CSS gesteuert , ohne Javascript-Callbacks einrichten zu müssen, etc .. Sie können das aktualisierte Tutorial zu Year Of Moo . @dfsq wies in den Kommentaren auf ein Schöne Reihe von Beispielen .

69
Mortimer

Überprüfen Sie diesen 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 der Hauptseite:

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

Teilweise HTML Beispiel:

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

Ich bin mir nicht sicher, wie ich das direkt mit AngularJS machen soll, aber Sie können die Anzeige sowohl für Begrüßung als auch für Anmeldung auf none setzen und die Opazität mit einer Direktive animieren, sobald sie geladen sind.

Ich würde es so machen. 2 Anweisungen zum Einblenden und Ausblenden von Inhalten, wenn auf einen Link geklickt wird. Die Direktive für Ausblendungen könnte einfach ein Element mit einer eindeutigen ID animieren oder einen Dienst aufrufen, der die Ausblendung sendet

Vorlage:

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

Richtlinien:

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

Bedienung:

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

Ich habe diesen Code nur schnell zusammengestellt, damit es einige Fehler gibt :)

5
F Lekschas

Versuchen Sie, seinen Beitrag zu überprüfen. Es wird gezeigt, wie Übergänge zwischen Webseiten mithilfe von ngRoute und ngAnimate von AngularJS implementiert werden: Erstellen von Webseitenübergängen im iPhone-Stil mithilfe von AngularJS und CSS

1
ice.cube