在Ionic 2中动画从一个组件过渡到另一个组件 [英] Animating transition from one component to another in Ionic 2
问题描述
我的应用中有两个组件。
I have having two components in my app.
我需要设置这些页面之间转换的动画。
I need to animate the transition between these those pages.
我需要翻页1然后第2页应该出现。
I need to flip the page 1 and then page 2 should appear.
我有任何插件可以在离子2中执行。
I there any plugin to do it in ionic 2.
任何参考/示例都将受到赞赏。
Any reference/example will be appreciated.
我正在使用 this.navController.setRootPage(Page2)
从一个页面转到另一个页面。
I am using this.navController.setRootPage(Page2)
to go from one page to another.
推荐答案
我不知道Ionic框架,但这里是一个demo(plunker)它如何与简单的Angular2一起使用: http://plnkr.co/edit/yJHjL5ap9l4MwOimCyyY? p =预览
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
使用Component装饰器的动画
功能:
Using the animations
feature of the Component decorator:
组件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中动画从一个组件过渡到另一个组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!