Angular 如何设置组件的动画以沿[方向]滑动？

我正在制作一个个人网站，其中的不同部分（即主页、关于、投资组合、联系人）实际上是组件

当我单击节链接（即联系人）时，我希望现有组件通过

@幻灯片退出
，而新组件通过
@幻灯片进入
：输入
。需要注意的是，我希望任何中间组件都能做同样的事情。例如：

用户从“主页”开始，但单击“联系人”
回家
：离开

关于
：输入
，关于
：离开

公文包
：输入
，公文包
：离开
联系人
：输入

根据当前
pageIndex
和目标
pageIndex
，组件应向左或向右滑动

我知道有用于旋转木马的jQuery和AngularAPI，但如果自己编写它，那就酷多了。它也不是一个传统的旋转木马。我要求太多了吗

我当前策略的问题是，中间组件没有得到动画效果。使用
console.log（componentRef）
在
loadComponent（）
中显示正在创建中间组件，我最终到达了正确的页面，其中
：输入带有动画的
。我还使用了一个简单的淡入淡出动画进行测试，因为幻灯片动画也有问题

[--我当前的战略--]：

您可以将其用作动画
：increment
和
：decreation
。是的，有一点代码。想象一下你在动画中有一个.ts

export const slideInAnimation =
    trigger('routeAnimations', [

        transition(':increment', [
            style({ position: 'relative' }),
            query(':enter, :leave', [
                style({
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    width: '100%'
                })
            ], { optional: true }),
            query(':enter', [
                style({ left: '100%' })
            ], { optional: true }),
            query(':leave', animateChild(), { optional: true }),
            group([
                query(':leave', [
                    animate('300ms ease-out', style({ left: '-100%' }))
                ], { optional: true }),
                query(':enter', [
                    animate('300ms ease-out', style({ left: '0%' }))
                ], { optional: true })
            ]),
            query(':enter', animateChild(), { optional: true }),
        ]),
        transition(':decrement', [
            style({ position: 'relative' }),
            query(':enter, :leave', [
                style({
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    width: '100%'
                })
            ], { optional: true }),
            query(':enter', [
                style({ left: '-100%' })
            ], { optional: true }),
            query(':leave', animateChild(), { optional: true }),
            group([
                query(':leave', [
                    animate('300ms ease-out', style({ left: '100%' }))
                ], { optional: true }),
                query(':enter', [
                    animate('300ms ease-out', style({ left: '0%' }))
                ], { optional: true })
            ]),
            query(':enter', animateChild(), { optional: true }),
        ])

    ]);

如果您在main.app.html中编写

<div [@routeAnimations]="prepareRoute(outlet)">
  <router-outlet #outlet="outlet"></router-outlet>
</div>

您的路线只需要添加为数据“动画”，如

{ path: 'Page1', component: Page1Component, data: { animation: '1' } },
{ path: 'Page2', component: Page2Component, data: { animation: '2' } },
{ path: 'Page3', component: Page3Component, data: { animation: '3' } },
{ path: 'Page4', component: Page4Component, data: { animation: '4' } },

我
“我要求的太多了吗？”-没有，但你是有意识地决定在这里通过不使用角度动画框架来重新发明轮子。你是对的。之所以没有一种众所周知的方法来实现这一点，是因为它非常复杂，Angular开发了自己的API；和/或B）有一种简单优雅的方法可以通过CSS属性实现这一点。我要去探索一下。最好的办法可能是让css类引用并索引--1``in--2
中的
，然后您可以通过javascript切换元素。然后让最初的css动画对其运行以定位它们。您正在寻找路由动画吗@Eliseo我只是在看这个。但仅仅在两页之间制作动画就需要大约20行代码…我总共有四行。我也不认为它能解决中间页面动画的问题。
<div [@routeAnimations]="prepareRoute(outlet)">
  <router-outlet #outlet="outlet"></router-outlet>
</div>

prepareRoute(outlet: RouterOutlet) {
    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
  }

{ path: 'Page1', component: Page1Component, data: { animation: '1' } },
{ path: 'Page2', component: Page2Component, data: { animation: '2' } },
{ path: 'Page3', component: Page3Component, data: { animation: '3' } },
{ path: 'Page4', component: Page4Component, data: { animation: '4' } },