Cuando uso la misma animación angular en el elemento secundario, no funciona
Aug 19 2020
Cuando uso la misma animación de rotación en el elemento principal y secundario, siempre funciona en el elemento principal, pero no funciona la primera vez en el elemento secundario, pero funciona la segunda vez.
Si solo tengo un elemento, funciona. Aquí hay un ejemplo
https://stackblitz.com/edit/angular-ivy-g9dvv3
Respuestas
1 profanis Sep 01 2020 at 17:37
No soy un experto en animaciones pero parece que hay que separar las animaciones en dos partes. Uno para la órbita y otro para el planeta.
Como tal, lo probé y creé dos trigger
funciones diferentes respectivamente.
Al tener solo una función de activación, es como si las ejecutara secuencialmente. Una vez hecho el primero, se evalúa el segundo.
@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)'
}))
])
])
]
})
y el 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>