Параллельное выполнение нескольких анимаций запросов

У меня есть два маршрутизируемых компонента и их контейнер, для которого я установил триггер анимации @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%' })))
])

Это работает, за исключением того, что вторая анимация ожидает завершения первой перед запуском, в то время как я ищу способ заставить их запускаться параллельно. Мысли?


typescript angular angular-animations
person Drazen Bjelovuk    schedule 09.08.2017    source источник

Ответы (2)


arrow_upward
11
arrow_downward

Оберните запросы в 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%' }))) ])
])

Отдайте должное Ploppy3 на GitHub.

person Drazen Bjelovuk    schedule 09.08.2017

arrow_upward
1
arrow_downward

Ploppy3 ответил вам здесь: https://github.com/angular/angular/issues/9845#issuecomment-321240191 как сделать отдельную анимацию для роутера при инициализации. Дочерняя анимация отключена по умолчанию, поэтому вы увидите только анимацию маршрутизатора (чтобы включить ее, вы можете проверить https://angular.io/api/animations/animateChild). Итак, чтобы сделать то, что вы хотите, мне нужно просто добавить анимацию, необходимую для компонентов. Поэтому вам нужно добавить routerAnimation, как написал Ploppy3, и использовать слайд для компонентов.

person Dima Kurilo    schedule 09.08.2017