เมื่อฉันใช้แอนิเมชั่นเชิงมุมเดียวกันกับองค์ประกอบลูกมันไม่ได้ผล

Question

เมื่อฉันใช้การหมุนภาพเคลื่อนไหวเดียวกันกับองค์ประกอบหลักและองค์ประกอบลูกมันจะทำงานกับองค์ประกอบหลักเสมอ แต่จะใช้ไม่ได้ในครั้งแรกกับลูก แต่จะใช้งานได้ในครั้งที่สอง

ถ้าฉันมีเพียงองค์ประกอบเดียวก็ใช้ได้ นี่คือตัวอย่าง

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

Answer 1

ฉันไม่ใช่ผู้เชี่ยวชาญเกี่ยวกับแอนิเมชั่น แต่ดูเหมือนว่าคุณต้องแยกภาพเคลื่อนไหวออกเป็นสองส่วน หนึ่งสำหรับวงโคจรและอีกหนึ่งสำหรับดาวเคราะห์

ด้วยเหตุนี้ฉันจึงลองดูและสร้างtriggerฟังก์ชันที่แตกต่างกันสองฟังก์ชันตามลำดับ

การมีฟังก์ชันทริกเกอร์เพียงฟังก์ชันเดียวก็เหมือนกับว่ามันดำเนินการตามลำดับ เมื่อทำครั้งแรกเสร็จแล้วจะมีการประเมินครั้งที่สอง

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

และ 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>