Сделать родительскую анимацию ждать, пока анимация для детей закончится в Angular

У меня есть полноэкранная навигация, которая захватывает экран. Содержимое меню (дочернего), которое я хотел бы появиться после ввода оверлея (родителя). Это я начал работать. Однако вопрос о переходе на отпуск является проблемой.

Я не могу заставить ребенка исчезнуть или даже полностью исчезнуть, пока родитель не оживится. Вместо этого родительский анимирует сначала, хотя я не могу подтвердить, что дочерняя анимация работает.

Начало анимации выхода устанавливает ширину и высоту родительского элемента в 300% от представления. Это необходимо для того, что просит группа продуктов.

HTML:

<div *ngif="menuOpen" @fullscreennav="">
 <div @showhideonleave="">
 </div>
</div>

TS компонента (только анимация):

animations: [
trigger('animateChildren', [
 transition(':enter, :leave', [
 query('@showHideOnLeave', animateChild())
 ])
]),
trigger('fullscreenNav', [
 transition(':enter', [
 style({
 height: '20vh',
 width: '50vw',
 borderRadius: '100%',
 borderTopRightRadius: '0',
 top: '-10vh',
 right: '-10vw'
 }),
 animate('400ms ease-in', style({
 height: '300%',
 width: '300%',
 borderRadius: '0',
 top: '0',
 right: '0'
 })),
 ]),
 transition(':leave', [
 style({
 height: '100%',
 width: '100%',
 borderRadius: '100%',
 borderTopRightRadius: '0',
 overflow: 'hidden',
 top: '0vh',
 right: '0vw'
 }),
 animate('500ms 100ms', style({
 offset: 1,
 height: '15vh',
 width: '20vw',
 borderRadius: '100%',
 borderTopRightRadius: '0',
 top: '-10vh',
 right: '-10vw'
 })),
 ]),
 ]),
1 ответ

Поэтому я понял это. Хитрость заключается в использовании функции group() внутри последовательности() внутри перехода(). Здесь мое решение ниже (первая функция триггера удалила селектор перехода: оставьте переход, а в поле: оставить переход в полноэкранномNav, я добавил функцию группы и последовательности, чтобы инициировать дочернюю анимацию):

animations: [
trigger('animateChildren', [
 transition(':enter', [
 query('@showHideOnLeave', animateChild())
 ])
]),
trigger('fullscreenNav', [
 transition(':enter', [
 style({
 height: '20vh',
 width: '50vw',
 borderRadius: '100%',
 borderTopRightRadius: '0',
 top: '-10vh',
 right: '-10vw'
 }),
 animate('400ms ease-in', style({
 height: '300%',
 width: '300%',
 borderRadius: '0',
 top: '0',
 right: '0'
 })),
 ]),
 transition(':leave', [
 sequence([
 group([
 query('@showHideOnLeave', animateChild({ duration: '200ms' })),
 ]),
 style({
 height: '300%',
 width: '300%',
 borderRadius: '100%',
 borderTopRightRadius: '0',
 overflow: 'hidden',
 top: '0vh',
 right: '0vw'
 }),
 animate('300ms 100ms', style({
 offset: 1,
 height: '15vh',
 width: '20vw',
 borderRadius: '100%',
 borderTopRightRadius: '0',
 top: '-10vh',
 right: '-10vw'
 })),
 ])
 ]),
]),
trigger('showHideOnLeave', [
 transition('void => *', [
 style({
 opacity: 0
 }),
 animate('200ms 400ms', style({
 opacity: 1
 }))
 ]),
 transition('* => void', [
 style({
 opacity: 1
 }),
 animate('100ms', style({
 opacity: 0
 }))
 ])
]),

]

licensed under cc by-sa 3.0 with attribution.