ルートアニメーション角度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のいずれかのソリューションを用意していますか？

私はこれをplunkrに入れていません。なぜなら、私はNG4アプリケーションをどのように設定するか考えていないからです。謝罪。

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