在 Ionic 2 中从一个组件到另一个组件的动画过渡

我的应用程序中有两个组件。

我需要为这些页面之间的过渡设置动画。

我需要翻动第 1 页，然后第 2 页就会出现。

我有任何插件可以在 ionic 2 中执行此操作。

任何参考/示例将不胜感激。

我在用this.navController.setRootPage(Page2)从一页转到另一页。

我不知道 Ionic 框架，但这里有一个演示（plunker）它如何与普通的 Angular2 一起工作：http://plnkr.co/edit/yJHjL5ap9l4MwOimCyyY?p=preview 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() { }
}