I have a parent component with a nested child component, both have :enter and :leave animations. To run both animations in parallel I use group() and animateChild() functions. But, if the parent animate() call is located inside group() call, the parent state transition isn't animated.
animations: [
trigger('child', [
state('void', style({
opacity: 0
})),
transition('void <=> *', animate('1750ms ease-in'))
]),
trigger('parent', [
state('void', style({
height: 0
})),
transition('void <=> *', group([
animate('1750ms ease-out'),
query('@child', [
animateChild()
])
]))
])
]
Because of this, I must describe void => * and * => void parent transitions separately, and move parent style description into the transitions. But in this case the parent animation description is much more complicated:
trigger('parent', [
transition('void => *', [
style({
height: 0
}),
group([
animate('1750ms ease-in', style({
height: '*'
})),
query('@child', [
animateChild()
])
])
]),
transition('* => void', [
style({
height: '*'
}),
group([
animate('1750ms ease-in', style({
height: 0
})),
query('@child', [
animateChild()
])
])
])
])
UPDATE:
The workaround above can be improved by moving the parent animation into a separate animation:
const parentAnimation = animation([
style({
height: '{{startHeight}}'
}),
group([
animate('175ms ease-in', style({
height: '{{endHeight}}'
})),
query('@child', [
animateChild()
])
])
]);
@Component({
animations: [
trigger('parent', [
transition('void => *', [
useAnimation(parentAnimation, {
params: {
startHeight: 0,
endHeight: '*'
}
})
]),
transition('* => void', [
useAnimation(parentAnimation, {
params: {
startHeight: '*',
endHeight: 0
}
})
])
])
]
})
