AngularJS - ng-view 전환 애니메이션 생성

AngularJS - ng-view 전환 애니메이션 생성

html 페이지가 2개 있는데welcome.html그리고.login.html두 가지 모두 '에의해'index.htmlAngular의 일부로서 Atribute 및 라우터 프로바이더를 경유하여 URL에 의존합니다.JS 앱

이 예는 Angular에서 찾을 수 있습니다.백엔드 배선 아래의 JS 홈 페이지.

질문입니다.이 둘 사이의 이행을 활성화 시킬 수 있는 방법은 없을까?welcome.html그리고.login.html?

이제 Angularjs 1.1.4는ng-animate다양한 요소(특히 ng-view)의 애니메이션을 지원하는 지시문입니다.

이 새로운 기술에 대한 비디오도 볼 수 있습니다.

업데이트는 angularjs 1.2에서 애니메이션의 동작방식이 대폭 변경되어 현재는 javascript 콜백 등을 셋업할 필요 없이 CSS로 제어되고 있습니다.업데이트된 튜토리얼은 Year Of Mo에서 확인할 수 있습니다.@dfsq는 코멘트에서 좋은 예시를 지적했습니다.

다음 코드를 확인합니다.

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:

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

부분 HTML의 예:

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

Angular로 직접 할 수 있는 방법은 잘 모르겠어요.그러나 JS는 시작과 로그인에 대해 모두 표시를 none으로 설정하고 로드된 명령어로 불투명도를 애니메이션화할 수 있습니다.

저는 이렇게 하고 싶습니다.2 링크를 클릭했을 때 콘텐츠를 페이드아웃하고 페이드아웃하기 위한 지시입니다.페이드아웃 명령은 고유 ID로 요소를 애니메이션화하거나 페이드아웃을 브로드캐스트하는 서비스를 호출할 수 있습니다.

템플릿:

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

지시:

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

서비스:

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

이 코드를 빨리 조립했기 때문에 버그가 있을 수 있습니다.

그의 게시물을 확인해 보세요.Angular를 사용하여 웹 페이지 간 전환을 구현하는 방법을 보여줍니다.JS의 ngRoute 및 ngAnimate:Angular를 사용하여 iPhone 스타일의 웹 페이지를 변환하는 방법JS 및 CSS

1. Angular-Animate 설치

2. 클래스에 애니메이션 효과 추가ng-enter페이지 입력 애니메이션 및 클래스ng-leave페이지 종료 애니메이션용

참고: 이 페이지에는 angular view 전환에 대한 무료 리소스가 있습니다.https://e21code.herokuapp.com/angularjs-page-transition/

언급URL : https://stackoverflow.com/questions/13083644/angularjs-animate-ng-view-transitions