AngularJS-Animate ng-view transitions

Sprawdź ten kod:

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

Strona główna HTML :

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

przykład częściowy HTML :

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

Nie jestem pewien, jak zrobić to bezpośrednio z AngularJS, ale możesz ustawić wyświetlacz na brak zarówno dla powitania, jak i logowania i animować krycie za pomocą dyrektywy po załadowaniu.

Szablon:

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

Dyrektywy:

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

Usługa:

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

Po prostu szybko ułożyłem ten kod, więc mogą być jakieś błędy:)

Spróbuj sprawdzić jego stanowisko. Pokazuje, jak zaimplementować przejścia między stronami za pomocą AngularJS 's ngRoute i ngAnimate: Jak tworzyć przejścia stron w stylu iPhone' a za pomocą AngularJS & CSS

1.Install angular-animate

2.Dodaj efekt animacji do klasy ng-enter dla animacji wchodzącej na stronę i klasy ng-leave dla animacji wychodzącej na stronę

Odsyłacz: ta strona ma bezpłatny zasób na temat przejścia kątowego widoku https://e21code.herokuapp.com/angularjs-page-transition/