Сделать родительскую анимацию ждать, пока анимация для детей закончится в 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.