Ionic 2でコンポーネントを別のコンポーネントにアニメーション化する

Question

私のアプリケーションには2つのコンポーネントがあります。

これらのページ間の遷移をアニメーション化する必要があります。

ページ1を反転してから2ページ目が表示されます。イオン2.

にどれ参照/例がそれを行うには

私がどのプラグインが理解されるであろう。

私はthis.navController.setRootPage(Page2)を使用してページ間を移動しています。

Answer 1

私はイオンの枠組みを知りませんが、ここでは、プレーンAngular2でどのように動作するかのデモ（plunker）があります：http://plnkr.co/edit/yJHjL5ap9l4MwOimCyyY?p=preview

コンポーネントデコレータのanimations機能の使用：

成分A

を

@Component({ 
    selector: 'home', 
    directives: [ROUTER_DIRECTIVES], 
    template: ` 
    <div class="radibre"> 
    Home page 
    </div> 
    `, 
    styles: ['.radibre { width: 200px; height: 100px; background: red; color: white; }'], 
    host: { 
    '[@routeAnimation]': 'true', 
    '[style.display]': "'block'", 
    '[style.position]': "'absolute'" 
    }, 
    animations: [ 
    trigger('routeAnimation', [ 
     state('*', style({transform: 'translateX(0)', opacity: 1})), 
     transition('void => *', [ 
     style({transform: 'translateX(-100%)', opacity: 0}), 
     animate(1000) 
     ]), 
     transition('* => void', animate(1000, style({transform: 'translateX(100%)', opacity: 0}))) 
    ]) 
    ] 
}) 

export class Home { 
    constructor() { } 
} 

成分B

@Component({ 
    selector: 'page', 
    template: ` 
    <div class="page">Another page</div>`, 
    styles: ['.page { width: 200px; height: 100px; background: green; color: white; }'], 
    host: { 
    '[@routeAnimation]': 'true', 
    '[style.display]': "'block'", 
    '[style.position]': "'absolute'" 
    }, 
    animations: [ 
    trigger('routeAnimation', [ 
     state('*', style({transform: 'translateX(0)', opacity: 1})), 
     transition('void => *', [ 
     style({transform: 'translateX(-100%)', opacity: 0}), 
     animate(1000) 
     ]), 
     transition('* => void', animate(1000, style({transform: 'translateX(100%)', opacity: 0}))) 
    ]) 
    ] 
}) 

export class Page { 
    constructor() { } 
}