并行运行多个查询动画 [英] Run multiple query animations in parallel

问题描述

我有两个路由组件及其容器，我在其中设置了动画触发器@slide，在其中查询每个元素并进行相应的动画处理.

I have two routed components and their container to which I've set an animation trigger, @slide, wherein I query for each and animate accordingly.

<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%' })))
])

这可以工作，除了第二个动画在触发之前等待第一个动画完成，而我正在寻找的是让它们并行触发的一种方法.有想法吗?

This works, except that the second animation waits for the first to complete before firing, while what I'm looking for is a way to have them fire in parallel. Thoughts?

推荐答案

将查询包装在

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 上.

Credit to Ploppy3 over on GitHub.

这篇关于并行运行多个查询动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！