小编Cla*_*lay的帖子

我正在处理的应用程序需要能够在路线中来回导航,因此当您从一个方向导航应用程序时,组件从左向右动画,当您向后导航时,它们从右向左导航.

即

component1 -> component2 =  left -> right animation
component2 -> component1 = right -> left animation

我可以在NG4中轻松实现这一点,但问题是它不会导航退出和输入组件.退出组件刚刚消失,输入组件动画显示.

我也可以在NG2中实现这一点 - 但是当你有条件动画时会出现复杂情况.即.

component2 -> component3 = left -> right animation
component2 -> component1 = right -> left animation

这里的问题是根据下一个或上一个路线触发不同的动画.

有没有人在NG2或4中有解决方案来解决在任一方向同时动画两个视图的问题？

我没有把它放在plunkr中,因为我不知道如何设置NG4应用程序.道歉.

我的NG4解决方案基于这个演示应用程序 https://github.com/matsko/ng4-animations-preview

但基本上在我的app.component.ts我有以下动画:

animations: [
    trigger('routerAnimations',[
        transition('page1 => page2',[
            style({transform: 'translateX(100%)'}),
            animate('500ms')
        ]),
        transition('page2 => page1', [
            style({transform: 'translateX(-100%)'}),
            animate('500ms')
        ]),
        transition('page2 => page3',[
            style({transform: 'translateX(100%)'}),
            animate('500ms')
        ]),
        transition('page3 => page2',[
            style({transform: 'translateX(-100%)'}),
            animate('500ms')
        ]),
        transition('page3 => page4',[ …

我试图在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绑定到主机元素的实例？有没有其他方法可以达到我需要的结果？

谢谢.