在 Ionic 2 中动画从一个组件到另一个组件的过渡 [英] Animating transition from one component to another in Ionic 2

问题描述

我的应用中有两个组件.

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

我需要翻转第 1 页，然后才会出现第 2 页.

我有任何插件可以在 ionic 2 中做到这一点.

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

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

解决方案

我不知道 Ionic 框架，但这里有一个演示(plunker)它是如何与普通的 Angular2 一起工作的:http://plnkr.co/edit/yJHjL5ap9l4MwOimCyyY?p=preview

使用组件装饰器的 animations 功能:

组件 A

@Component({选择器:'家'，指令:[ROUTER_DIRECIVES]，模板:`<div class="radibre">主页

`，样式:['.radibre { 宽度:200px;高度:100px；背景:红色；白颜色;}'],主持人: {'[@routeAnimation]': '真','[style.display]': "'block'",'[style.position]': "'绝对'"},动画:[触发器('路由动画'，[state('*', style({transform: 'translateX(0)', opacity: 1})),过渡('void => *'，[样式({转换:'translateX(-100％)'，不透明度:0})，动画(1000)]),transition('* => void', animate(1000, style({transform: 'translateX(100%)', opacity: 0})))])]})出口类首页{构造函数(){}}

组件 B

@Component({选择器:'页面'，模板:`<div class="page">另一个页面</div>`,样式:['.page { 宽度:200px;高度:100px；背景:绿色；白颜色;}'],主持人: {'[@routeAnimation]': '真','[style.display]': "'block'",'[style.position]': "'绝对'"},动画:[触发器('路由动画'，[state('*', style({transform: 'translateX(0)', opacity: 1})),过渡('void => *'，[样式({转换:'translateX(-100％)'，不透明度:0})，动画(1000)]),transition('* => void', animate(1000, style({transform: 'translateX(100%)', opacity: 0})))])]})导出类 Page {构造函数(){}}

I have having two components in my app.

I need to animate the transition between these those pages.

I need to flip the page 1 and then page 2 should appear.

I there any plugin to do it in ionic 2.

Any reference/example will be appreciated.

I am using this.navController.setRootPage(Page2) to go from one page to another.

解决方案

I don't know the Ionic framework, but here's a demo (plunker) how it works with plain Angular2: http://plnkr.co/edit/yJHjL5ap9l4MwOimCyyY?p=preview

Using the animations feature of the Component decorator:

Component 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() { }
}

Component 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() { }
}

这篇关于在 Ionic 2 中动画从一个组件到另一个组件的过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！