AngularJS - animacja przeładowania strony w routingu

Pijany Krawiec

2016-01-24 10:42

Pijany Krawiec2016-01-24 10:42

Mam zrobiony routing za pomocą AngularJS, strony przeładowują się bez odświeżania strony, zmienia się jedynie content:

Kopiuj

.....

        $routeProvider
            .when('/password',{
                templateUrl: 'content/password.html',
            })
            .when('/delete',{
                templateUrl: 'content/delete.html',
                controller: 'DeleteCtrl'
            })

.....

W index.html mam div wyświetlający zawartość:

Kopiuj

<div ng-view></div>

Teraz każdą zmianę podstrony chcę animować, np. płynne pojawienie się w krótkim czasie.

Zrobiłem coś takiego, ale w jQuery:

index.html:

Kopiuj

<div id="content" style="display: none;" ng-view></div>

każda podstrona html ma kod:

Kopiuj

<script>$(document).ready(function(){ $("#content").fadeIn(300); });</script>

Teraz trochę bezsensu dodawać w każdej podstronie ten skrypt, bo jak dodam 1 raz w index.html to nie będzie to działać.

Jak zrobić takie coś w AngularJS za pomocą modułu ngAnimate? Nie chcę śmiecić i mieszać z jQuery, skoro używam Angulara.

WerdenSehen

2016-01-24 15:09

WerdenSehen2016-01-24 15:09

Rejestracja:ponad 9 lat
Ostatnio:około 9 lat
Postów:12

Kopiuj



<div ng-app="app" ng-controller="TestCtrl">
   <div class="box-one" ng-show="showBoxOne" ng-view></div>
</div>

Kopiuj

.box-one {
  margin:10px 0 20px 0;
  padding:10px;
  border:1px solid rgba(0,0,0,0.2);
  background:#f00;
  color:#fff;
  border-radius:4px;

  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
}

.box-one.ng-hide {
  opacity:0;

}

Kopiuj

 
function TestCtrl($scope) {
  
  $scope.showBoxOne = false;
    setTimeout(function () {
        $scope.$apply(function(){
            $scope.showBoxOne = true;
        });
    }, 1500);


}

angular.module('app', ['ngAnimate'])
.controller('TestCtrl', TestCtrl)

Sprawdzalem, powinno dzialac.