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 中从一个组件到另一个组件的动画过渡的主要内容,如果未能解决你的问题,请参考以下文章