경로 변경을위한 두 개의 다른 애니메이션

Question

다음 사례가 있습니다. AngularJS 응용 프로그램에서 라우팅에 ui-router를 사용하고 있습니다. 한 경로에는 여러 하위 화면에 대해 다섯 개의 하위 상태가 있습니다. 나는 회전 목마와 같은 방식으로 이들 사이의 전환을 애니메이션으로 만들고 싶다.

탐색은 다음과 같습니다

왼쪽 밖으로 screen A 슬라이드 및 오른쪽에서 screen B 슬라이드를해야 state A state B까지 탐색

Link to A | Link to B | Link to C | Link to D | Link to E 

; 그 반대의 경우는 state B에서 state A까지입니다. 작업은 한 방향으로 enter 및 leave에 transform: translateX(...);로 화면 전환 애니메이션입니다 무엇을

.

보통 깃발이 달린 ng-class을 사용하여 내 애니메이션을 제어합니다. 그러나이 경우, ui-view 요소의 클래스 설정은 전혀 작동하지 않습니다 (각도 1.2 및 ui-router 0.2는 아직 완전히 호환되지 않습니다). 또한 전환이 시작된 후 해고되는 scope.$on "$stateChangeStart"을 경청하는 사용자 정의 지시문으로 설정하는 것도 아닙니다.

원하는 동작을 어떻게 구현할 수 있습니까?

편집 : 기록을위한 솔루션

: 나는 경로를 변경하기 전에 방향을 결정하기 위해 $state.go()를 사용하여 사용자 정의 $scope 기능을 사용하여 구현 끝났다. 이렇게하면 $digest already in progress 오류가 발생하지 않습니다. 애니메이션을 결정하는 클래스는 ui-view의 부모 요소에 추가됩니다. 이것은 현재뿐만 아니라 미래도 ui-view 올바른 방향으로 움직입니다.

컨트롤러 기능 (커피 스크립트) :

go: (entry) -> 
    fromIdx = ... 
    toIdx = ... 

    if fromIdx > toIdx 
    $scope.back = false 
    else 
    $scope.back = true 

    $state.go entry 

템플릿 :

<div ng-class="{toLeft: back}"> 
    <div ui-view></div> 
</div> 

Answer 1

당신은 특별히 그렇게 컨트롤러를 설정하여보기에 클래스를 제어 할 수 있습니다. 그런 다음 앱에서 이벤트를 구독하고 페이지가 움직이는 방식을 변경할 수 있습니다. 내가 UI를 사용 했어주의하시기 바랍니다이 작업을 수행하려고 사람은 여기 http://codepen.io/ed_conolly/pen/aubKf

보여주기 위해 codepen을 설정 한

.controller('viewCtrl', function ($scope) { 
    $scope.$on('$stateChangeSuccess', function (event, toState) { 
     if (toState.name === 'state1') { 
      $scope.back = true; 
     } else { 
      $scope.back = false; 
     } 
    }); 
}); 

컨트롤러 내에서 다음

<div class="viewWrap" ng-controller="viewCtrl"> 
    <div class="container" ui-view ng-class="{back: back}"></div> 
</div> 

.router.compat 모듈은 Angular 1.2 및 UI Router의 애니메이션의 현재 비 호환성 때문에 발생합니다.

Answer 2

항상 angular-1.2 분기를 체크 아웃 할 수 있습니다 : https://github.com/angular-ui/ui-router/tree/angular-1.2. 이것은 ngAnimate를 몇 가지 다른 것들과 함께 수정합니다.

이 내용은 ui-router 0.3에 포함될 것입니다.0이므로 라이브를 곧 진행하지 않는 한 'stable'브랜치로 돌아올 때까지 필요한 기능을 제공해야합니다.

면책 조항 : 나는 UI 라우터의 다음 릴리스시기 또는 포함될 내용에 대한 권한이 없습니다. 나는 단순히 github 페이지의 다양한 문제에서이 정보를 발견했습니다.

Answer 3

Eddiec의 솔루션은 정말 좋은 시작 이었지만 여전히 약간 해킹 당했다. 여기에 내 목적에 맞게 작동하는 수정 된 컨트롤러가 있습니다. 이것은 더 역동적이다 : 나는 ngRoute이 $routeChangeSuccess를 사용하지만 우연히 문제가 다이제스트주기가 실행되기 전에 ng-leave 애니메이션을 시작할 것이라고했다으로이 같은 일을 시도했습니다

function ViewCtrl($scope, $state) { 

    $scope.$on('$stateChangeStart', function (event, toState) { 
     var movingToParent = $state.includes(toState.name); 
     if (movingToParent) { 
      $scope.back = true; 
     } else { 
      $scope.back = false; 
     } 
    }); 


} 

Answer 4

. 입력 애니메이션은 항상 정확했지만 휴가 애니메이션은 항상 이전 애니메이션이었습니다.

나를 위해 일한 해결책 (각도 1.57)은 에 $location.path() 전화를 래핑하는 것이 었습니다. 이렇게하면 애니메이션이 시작되기 전에 전체 다이제스트가 실행됩니다.

function goto(path) { 
    if(nextIndex > currentIndex) { 
     ctrl.transition = 'slide-out-left'; 
    } else { 
     ctrl.transition = 'slide-out-right'; 
    } 
    $timeout(function() { 
     $location.path(path); 
    }); 
    } 

Answer 5

@ eddiec의 허용 된 답변과 비슷한 시도입니다. 기본적으로 상태 이름 값의 배열과 toState 및 fromState 값의 이름 배열의 위치가 비교되어 방향을 결정합니다.

.controller('viewCtrl', function ($scope) { 
    $scope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) { 

     // create an array of state names, in the order they will appear 
     var states = ['state1', 'state2', 'state3']; 

     if (states.indexOf(toState.name) < states.indexOf(fromState.name)) { 
      $scope.back = true; 
     } 
     else { 
     $scope.back = false; 
     } 
    }); 
}); 

코덱 (Codepen)은 작업 결과를 보여줍니다. http://codepen.io/anon/pen/zBQERW