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

Posted

技术标签:

【中文标题】Ionic 2 中从一个组件到另一个组件的动画过渡【英文标题】:Animating transition from one component to another in Ionic 2 【发布时间】:2016-12-24 08:48:34 【问题描述】:

我的应用中有两个组件。

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

我需要翻开第 1 页,然后应该会出现第 2 页。

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

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

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

【问题讨论】:

欢迎来到 Stack Overflow!您能否在解决问题的努力下,在内容中提供更好的标题和更详细的信息? 【参考方案1】:

我不知道 Ionic 框架,但这里有一个演示(plunker)它如何与普通 Angular2 一起工作: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()  

【讨论】:

以上是关于Ionic 2 中从一个组件到另一个组件的动画过渡的主要内容,如果未能解决你的问题,请参考以下文章

基于 React 实现一个 Transition 过渡动画组件

过渡:元素/组件过渡和动画

Vue过渡动画

Vue过渡动画

Vue的transition过渡组件动画怎么使用

在Android中使用导航组件时如何删除默认动画过渡?