Дочерняя анимация иногда дает сбой при выполнении одновременно с родительской анимацией - PullRequest
Новая
       1

Дочерняя анимация иногда дает сбой при выполнении одновременно с родительской анимацией

0 голосов
/ 19 июня 2019

Вот мои маршруты: 

const routes: Routes = [
  { path: "", redirectTo: "home", pathMatch: "full" },
  { path: "home", component: HomeComponent, },
  { path: "profile", component: ProfileComponent, canActivate: [AuthGuard], children: [
    {path: '', redirectTo: 'transactions', pathMatch: "full"},
    {path: "transactions", component: TransactionsComponent},
    {path: "auction-history", component: AuctionHistoryComponent}
  ] },
];

У меня есть анимация маршрутизатора в app.component для навигации между home и profile. Внутри profile.component у меня есть анимация маршрутизатора для навигации между transactions и auction-history. Они работают нормально.

В компоненте transactions я использую следующую анимацию, которая имеет проблему: 

export const smoothHeightAnimation = trigger('grow', [
  transition('* <=> *', [style({ height: '{{startHeight}}px' }), animate('.5s ease')], {
    params: { startHeight: 0 }
  })
]);

Анимация срабатывает, но заканчивается в неправильном состоянии (высота слишком мала, часть содержимого переполнена). Это происходит как при навигации из home -> transactions, так и auction-history -> transactions.

Через Google я подумал, что, возможно, этот код может помочь: 

query('@grow', [
    animateChild()
  ], {optional: true})

Так и есть, но только частично. Если я только добавлю его в роутер, анимация для app.component, smoothHeight работает при навигации от home -> transactions. Если я только добавлю его в роутер, анимация для profile.component, smoothHeight работает при переходе от auction-history -> transactions.

Однако, если я добавлю animateChild() к анимации маршрутизатора app.component И profile.component, она будет работать только при навигации из auction-history -> transactions.

Надеюсь, понятно, в чем проблема. У кого-нибудь есть идеи о том, что здесь происходит и как я могу это исправить?

...