하위 요소에 동일한 각도 애니메이션을 사용하면 작동하지 않습니다.

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>