J'ai créé un élément (div.parent
) avec une animation Angular qui a très bien fonctionné. Lorsque j'y ajoute un élément enfant et que j'essaie d'animer l'enfant en même temps, l'une des animations ne finit pas par s'exécuter ( il s'enclenche simplement dans le nouvel état).
Stackblitz: https://stackblitz.com/edit/angular-2tbwu8
Annotation:
<div [@theParentAnimation]="state" class="parent">
<div [@theChildAnimation]="state" class="child">
</div>
</div>
Animations:
trigger( 'theParentAnimation', [
state( 'down', style( {
transform: 'translateY( 100% ) translateZ( 0 )',
} ) ),
transition( '* <=> *', [
group( [
query( ':self', [
animate( '0.9s cubic-bezier(0.55, 0.31, 0.15, 0.93)' ),
] ),
query( '@theChildAnimation', animateChild() ),
] ),
] ),
] ),
trigger( 'theChildAnimation', [
state( 'down', style( {
transform: 'translateY( 100% ) translateZ( 0 )',
} ) ),
transition( '* <=> *', [
animate( '0.9s cubic-bezier(0.55, 0.31, 0.15, 0.93)' ),
] ),
] ),
Il semble que vous n'ayez pas besoin d'utiliser query( ':self', ...
Car vous utilisez group()
les animations s'exécuteront en parallèle. Vous pouvez modifier la transition dans votre animation parent:
transition('* <=> *', [
group([
query('@theChildAnimation', animateChild()),
animate('0.9s cubic-bezier(0.55, 0.31, 0.15, 0.93)'),
]),
]),