경로 애니메이션 각도 4

Question

내가 진행하고있는 앱은 경로를 통해 앞뒤로 탐색 할 수 있어야하므로 한 방향으로 앱을 통해 한 방향으로 탐색 할 때 구성 요소가 왼쪽에서 오른쪽으로 움직이며 다시 탐색 할 때 오른쪽에서 왼쪽으로 이동합니다.

즉

component1 -> component2 = left -> right animation 
component2 -> component1 = right -> left animation 

내가 NG4에서 충분히 쉽게이를 수 있지만 문제는 출구 입력 구성 요소를 모두 이동하지 않습니다. 기존 구성 요소가 사라지고 들어오는 구성 요소가 애니메이션으로 표시됩니다.

또한 NG2에서이를 수행 할 수 있습니다. 그러나 조건부 애니메이션이있는 경우 문제가 발생합니다. 즉.

component2 -> component3 = left -> right animation 
component2 -> component1 = right -> left animation 

여기서 문제

다음 또는 이전 경로에 따라 다른 애니메이션을 트리거한다.

어느 방향 으로든 두보기를 동시에 애니 메이팅하는 문제를 해결하려면 누구에게도 NG2 또는 4 해결책이 있습니까?

NGun 앱을 설치하는 방법을 모르기 때문에 plunkr에 넣지 않았습니다. 사과.

animations: [ 
    trigger('routerAnimations',[ 
     transition('page1 => page2',[ 
      style({transform: 'translateX(100%)'}), 
      animate('500ms') 
     ]), 
     transition('page2 => page1', [ 
      style({transform: 'translateX(-100%)'}), 
      animate('500ms') 
     ]), 
     transition('page2 => page3',[ 
      style({transform: 'translateX(100%)'}), 
      animate('500ms') 
     ]), 
     transition('page3 => page2',[ 
      style({transform: 'translateX(-100%)'}), 
      animate('500ms') 
     ]), 
     transition('page3 => page4',[ 
      style({transform: 'translateX(100%)'}), 
      animate('500ms') 
     ]), 
     transition('page4 => page3',[ 
      style({transform: 'translateX(-100%)'}), 
      animate('500ms') 
     ]) 
    ]) 
] 

와 각 경로에서 애니메이션 값을 잡고하는 기능과 :

내 NG4 솔루션은 this demo apphttps://github.com/matsko/ng4-animations-preview

하지만 본질적으로 내 app.component.ts에서 나는 다음과 같은 애니메이션을 기반으로 바인딩 <router-outlet> in app.component.html에 출구가 변수 (?)

export class AppComponent { 
    prepareRouteTransition(outlet) { 
     let routeData: any; 
     try { 
      routeData = outlet['_activatedRoute'].snapshot.routeConfig['animation']; 
     } catch(e) { 
      return ''; 
     } 
     return routeData.value; 
    } 
} 

기능은 상기 애니메이션 값을 잡고 이는 전이 개시 및 종료 값을 정의하는 애니메이션에서 사용된다 :

export const APP_ROUTES = [{ 
    path: '', 
    component: Page1Component, 
    animation: { 
     value: 'page1', 
    } 
    }, 
    { 
    path: 'page2', 
    component: Page2Component, 
    animation: { 
     value: 'page2', 
    } 
    }, 
    { 
    path: 'page3', 
    component: Page3Component, 
    animation: { 
     value: 'page3' 
    } 
    }, 
    { 
     path: 'page4', 
     component: Page4Component, 
     animation: { 
      value: 'page4' 
     } 
    } 
]; 

app.component.html :

는

<div class="page" [@routerAnimations]="prepareRouteTransition(outlet)"> 
    <router-outlet #outlet="outlet"></router-outlet> 
</div> 

Answer 1

넌 :enter 및 :leave 요소를 쿼리 애니메이션을 정의하여 이제 이것을 달성 .

이 예는 종료 경로를 애니메이션을 원활하게 유입 경로에 애니메이션됩니다

const slideLeft = [ 
    query(':leave', style({ position: 'absolute', left: 0, right: 0 ,transform: 'translate3d(0%,0,0)' })), 
    query(':enter', style({ position: 'absolute', left: 0, right: 0, transform: 'translate3d(-100%,0,0)' })), 
    group([ 
    query(':leave', 
     animate('1s', style({ transform: 'translate3d(100%,0,0)' }))), 
    query(':enter', 
     animate('1s', style({ transform: 'translate3d(0%,0,0)' }))) 
    ]) 
] 

const slideRight = [ 
    query(':leave', style({ position: 'absolute', left: 0, right: 0 , transform: 'translate3d(0%,0,0)'})), 
    query(':enter', style({ position: 'absolute', left: 0, right: 0, transform: 'translate3d(100%,0,0)'})), 

    group([ 
    query(':leave', 
     animate('1s', style({ transform: 'translate3d(-100%,0,0)' }))), 
    query(':enter', 
     animate('1s', style({ transform: 'translate3d(0%,0,0)' }))) 
    ]) 
] 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    animations: [ 
    trigger('routerAnimations', [ 
     transition('products => product-details', slideRight), 
     transition('product-details => products', slideLeft) 
    ]) 
    ] 
})