我试图在Angular 4项目中工作的路线之间获得动画 - 但需要能够根据用户浏览应用程序的方式改变动画的方向(translateX) .
我发现保持DOM中进入和退出组件的唯一方法是使用void状态 .
此外,我必须将动画绑定到主机元素 . 如果我尝试将其绑定到组件中的元素,则只需使用输入组件替换现有组件 .
我想要这个,因为我不希望现有组件消失 - 我希望它在进入组件滑入时滑落以获得平滑的原生感觉应用程序 .
我有一个触发器设置有四个转换:
trigger('routing',[
state('*',style({transform: 'translateX(0)'})),
transition('void => back',[
style({transform: 'translateX(-100%'}),
animate('800ms')
]),
transition('back => void',[
animate('800ms',style({
transform:'translateX(100%)'
}))
]),
transition('void => forward',[
style({transform: 'translateX(100%'}),
animate('800ms')
]),
transition('forward => void',[
animate('800ms',style({
transform:'translateX(-100%)'
}))
])
])
在我的组件导出类中,我将其绑定到组件主机元素:
@HostBinding('@routing') routing
我可以操纵 routing
(将其设置为'back'或'forward'来控制方向)但这似乎创建了一个新的变量实例,这样如果我想改变动画方向,则退出页面会以与传入组件相反的方向设置动画,因为 routing
的实例似乎没有改变 .
Is there any way to update the instance of routing bound to the host element? Is there an alternative way to achieve the result I need?
谢谢 .