子要素で同じ角度のアニメーションを使用すると、機能しません

Aug 19 2020

親要素と子要素で同じ回転アニメーションを使用すると、常に親要素で機能しますが、子では最初は機能しませんが、2回目は機能します。

要素が1つしかない場合は、機能します。これが例です

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

回答

1 profanis Sep 01 2020 at 17:37

私はアニメーションの専門家ではありませんが、アニメーションを2つの部分に分ける必要があるようです。1つは軌道用、もう1つは惑星用です。

そのため、試してみて、triggerそれぞれ2つの異なる関数を作成しました。

トリガー機能が1つしかないので、順番に実行するようなものです。最初の作業が完了すると、2番目の評価が行われます。

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