Lorsque j'utilise la même animation angulaire sur l'élément enfant, cela ne fonctionne pas

Question

Lorsque j'utilise la même animation de rotation sur l'élément parent et l'élément enfant, cela fonctionne toujours sur l'élément parent, mais cela ne fonctionne pas la première fois sur l'enfant, mais cela fonctionne la deuxième fois.

Si je n'ai qu'un seul élément, cela fonctionne. Voici un exemple

https://stackblitz.com/edit/angular-ivy-g9dvv3

Answer 1

Je ne suis pas un expert des animations mais il semble que vous deviez séparer les animations en deux parties. Un pour l'orbite et un pour la planète.

En tant que tel, je l'ai essayé et j'ai créé deux triggerfonctions différentes respectivement.

N'ayant qu'une seule fonction de déclenchement, c'est comme s'il les exécutait séquentiellement. Une fois le premier terminé, le second est évalué.

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
   animations: [
    trigger('rotatedState', [
      transition('void => *', [
        animate('{{rotationSpeed}} linear', style({
          transform: 'rotate(360deg)'
        }))
      ]),
      
    ]),
    trigger('rotatedState1', [
      transition('rotated => *', [
        animate('{{rotationSpeed}} linear', style({
          transform: 'rotate(360deg)'
        }))
      ])
    ])
  ]
})

et le HTML

<div class="planet-orbit" 
      [@rotatedState]='{value: planet.orbitState, params:{rotationSpeed: planet.orbitSpeed}}'
      (@rotatedState.done)="onAnimationDone('orbitState')" >

  <div  class="planet" 
        [@rotatedState1]='{value: planet.state, params:{rotationSpeed: planet.spinSpeed}}'
        (@rotatedState1.done)="onAnimationDone('state')">
          <span>Planet</span>
  </div>

</div>