并行运行多个查询动画

Posted 2023-03-06

【中文标题】并行运行多个查询动画

【英文标题】：Run multiple query animations in parallel

【发布时间】：2018-01-17 19:35:01

【问题描述】：

我有两个路由组件和它们的容器，我设置了一个动画触发器 @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%' )))
])

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

【参考方案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。

【参考方案2】：

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