Question

我有两个路由组件及其容器，我已设置动画触发器@slide，其中我会查询每个组件并相应地设置动画。

<div [@slide]="o.activatedRouteData.name">
  <router-outlet #o="outlet"></router-outlet>
<div>

RouterModule.forRoot([
  { path: '',      component: HomeComponent,  data: { name: 'home' } },
  { path: 'login', component: LoginComponent, data: { name: 'login' } } ])

trigger('slide', [
  transition('login => home', [
    query('home', style({ left: '-120%', right: '120%' })),
    query('login', style({ left: '0', right: '0' })),

    query('home', animate(duration, style({ left: '0', right: '0' }))),
    query('login', animate(duration, style({ left: '120%', right: '-120%' })))
])

这是有效的，除了第二个动画在发射之前等待第一个动画完成，而我正在寻找的是一种让它们并行发射的方法。想法？

Answer 1

将查询换入group()

trigger('slide', [
  transition('login => home', [
    query('home', style({ left: '-120%', right: '120%' })),
    query('login', style({ left: '0', right: '0' })),

    group([ query('home', animate(duration, style({ left: '0', right: '0' }))),
            query('login', animate(duration, style({ left: '120%', right: '-120%' }))) ])
])

在GitHub上归功于Ploppy3。

Answer 2

Ploppy3在这里回答你：https://github.com/angular/angular/issues/9845#issuecomment-321240191如何在init上为路由器制作单独的动画。默认情况下禁用子动画，因此您只会看到路由器动画（要启用它，您可以检查https://angular.io/api/animations/animateChild）。所以要做你想做的事我需要添加组件所需的动画。所以你需要添加routerAnimation作为Ploppy3编写并使用幻灯片组件。

并行运行多个查询动画

2 个答案: