AngularJS – Animeer ng-view overgangen

Ik heb 2 html-pagina’s, welcome.htmlen login.htmldie beide worden “ingevoegd” in index.htmlafhankelijk van de URL via een ngview-attribuut en routerprovider, als onderdeel van mijn AngularJS-app.

Een voorbeeld hiervan is te vinden op de AngularJS-startpaginaonder Bekabel een backend.

Mijn vraag: is er een manier om de overgang tussen welcome.htmlen login.htmlte animeren?

Antwoord 1, autoriteit 100%

Angularjs 1.1.4 heeft nu de ng-animate-richtlijn geïntroduceerd om te helpen bij het animeren van verschillende elementen, in het bijzonder ng-view.

Je kunt ook de video over deze nieuwe prestatie bekijken

UPDATEvanaf angularjs 1.2 is de manier waarop animaties werken drastisch veranderd, het meeste wordt nu beheerd met CSS, zonder dat u javascript-callbacks, enz. hoeft in te stellen. U kunt de bijgewerkte tutorial over Year Of Moo. @dfsq wees in de commentaren op een mooie reeks voorbeelden.

Antwoord 2, autoriteit 23%

Controleer deze 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 hoofdpagina:

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

Gedeeltelijke HTML-voorbeeld:

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

Antwoord 3, autoriteit 7%

Ik weet niet zeker of ik dit rechtstreeks met AngularJS kan doen, maar je zou de weergave op geen kunnen zetten voor zowel welkom als inloggen en de dekking met een richtlijn animeren zodra ze zijn geladen.

Ik zou het zo doen. 2 Richtlijnen voor het infaden van de inhoud en uitfaden wanneer er op een link wordt geklikt. De richtlijn voor fade-outs kan eenvoudig een element animeren met een unieke ID of een service aanroepen die de fade-out uitzendt

Sjabloon:

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

Richtlijnen:

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

Ik heb deze code zojuist snel samengesteld, dus er kunnen wat bugs zijn 🙂

Antwoord 4

Probeer zijn bericht te controleren. Het laat zien hoe u overgangen tussen webpagina’s implementeert met behulp van AngularJS’s ngRoute en ngAnimate: Hoe om webpagina-overgangen in iPhone-stijl te maken met AngularJS & CSS

Antwoord 5

1.Installeer angular-animate

2.Voeg het animatie-effect toe aan de klasse ng-entervoor animatie die de pagina opent en de klasse ng-leavevoor animatie die de pagina verlaat

ter referentie: deze pagina heeft een gratis bron over de overgang van hoekige weergave https://e21code. herokuapp.com/angularjs-page-transition/