html - Angular Animations 滑入不起作用，只是出现

Question

我正在尝试使用 Angular Animations 实现路线转换、滑入。

过渡类型的作品 - 它不会滑入，而是滑出。滑入感觉就像一个滞后，它只是出现。为何如此？

export const slider =
  trigger('routeAnimations', [
    transition('* => isLeft', slideTo('left')),
    transition('* => isRight', slideTo('right')),
    transition('isRight => *', slideTo('left')),
    transition('isLeft => *', slideTo('right'))
  ]);

function slideTo(direction) {
  const optional = {optional: true};
  return [
    query(':enter, :leave', [
      style({
        position: 'absolute',
        top: 0,
        [direction]: 0,
        width: '100%'
      })
    ], optional),
    query(':enter', [
      style({[direction]: '-100%'})
    ]),
    group([
      query(':leave', [
        animate('600ms ease', style({[direction]: '100%'}))
      ], optional),
      query(':enter', [
        animate('600ms ease', style({[direction]: '0%'}))
      ])
    ]),
  ];
}


Route:
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'project/:title', component: ProjectComponent },
  { path: 'about', component: AboutComponent, data: { animation: 'isRight' } }
];

Answer 1

这是我创建的滑入/滑出路由器动画:

// router-animation.ts

import { trigger, transition, style, query, group, animateChild, animate, keyframes, } from '@angular/animations';

export const slider =
trigger('routeAnimations', [
    transition('isRight => isLeft', slideTo('left') ),
    transition('isLeft => isRight', slideTo('right') ),
    // transition('isRight => *', slideTo('left') ),
    // transition('isLeft => *', slideTo('right') )
]);

function slideTo(direction) {
const optional = { optional: true };
return [
    query(':enter, :leave', [
    style({
        position: 'absolute',
        top: 0,
        [direction]: 0,
        width: '100%'
    })
    ], optional),
    query(':enter', [
    style({ [direction]: '-110%'})
    ]),
    group([
    query(':leave', [
        animate('600ms ease', style({ [direction]: '110%'}))
    ], optional),
    query(':enter', [
        animate('600ms ease', style({ [direction]: '0%'}))
    ])
    ]),
    // Normalize the page style... Might not be necessary

    // Required only if you have child animations on the page
    // query(':leave', animateChild()),
    // query(':enter', animateChild()),
];
}

在路由模块上:

// app-routing.module.ts

const routes: Routes = [
    { path: '', redirectTo: 'route-1', pathMatch: 'full' },
    { path: 'route-1', component: Route1Component, data: { animation: 'isLeft'} },
    { path: 'route-2', component: Route2Component, data: { animation: 'isRight'} },
    { path: 'route-3', component: Route3Component }
];

在 app.component.html 文件中:

<!-- app.component.html -->

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

最后在 app.component.ts 文件中:

// app.component.ts

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

您可以在 StackBlitz here 中查看.