Ketika saya menggunakan Animasi sudut yang sama pada elemen anak, itu tidak berfungsi

Question

Ketika saya menggunakan animasi rotasi yang sama pada elemen induk dan anak, itu selalu bekerja pada elemen induk tetapi tidak bekerja pertama kali pada anak, tetapi berfungsi untuk kedua kalinya.

Jika saya hanya memiliki satu elemen, itu berfungsi. Ini contohnya

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

Answer 1

Saya bukan ahli animasi tapi sepertinya Anda harus memisahkan animasi menjadi dua bagian. Satu untuk orbit dan satu untuk planet.

Karena itu, saya mencobanya dan saya membuat dua triggerfungsi yang berbeda .

Memiliki hanya satu fungsi pemicu, itu seperti menjalankannya secara berurutan. Setelah yang pertama selesai, yang kedua dievaluasi.

@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)'
        }))
      ])
    ])
  ]
})

dan 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>