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