Когда я использую ту же угловую анимацию для дочернего элемента, она не работает
Aug 19 2020
Когда я использую одну и ту же анимацию поворота для родительского и дочернего элемента, она всегда работает с родительским элементом, но не работает в первый раз с дочерним элементом, но работает во второй раз.
Если у меня есть только один элемент, он работает. Вот пример
https://stackblitz.com/edit/angular-ivy-g9dvv3
Ответы
1 profanis Sep 01 2020 at 17:37
Я не специалист по анимации, но мне кажется, что вам нужно разделить анимацию на две части. Один для орбиты и один для планеты.
Таким образом, я попробовал и создал две разные 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>