6

我正在尝试在 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（将其设置为“后退”或“前进”以控制方向），但这似乎创建了一个变量的新实例，因此如果我想更改动画方向，退出页面的动画方向与传入的方向相反组件，因为 的实例routing似乎没有改变。

有没有办法更新routing绑定到宿主元素的实例？有没有其他方法可以达到我需要的结果？

谢谢。

4

0 回答 0