子要素で同じ角度のアニメーションを使用すると、機能しません
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>