路線動畫角度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應用程序。道歉。

我NG4解決方案是基於this demo apphttps://github.com/matsko/ng4-animations-preview

但基本上我app.component.ts我有以下的動畫：

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

，並從每個路由抓住動畫值的函數和結合其對<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) 
    ]) 
    ] 
})