CODEWITHSUNDEEP
angularanimationangular-animations
indrajeet
indrajeet

Reputation: 897

When I use same angular Animation on child element it doesn't work

When I use same rotate animation on parent and child element, it always work on parent element but it doesn't work first time on child, but it works second time.

If I have only one element it works. Here is example

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

Upvotes: 0

Views: 813

Answers (1)

profanis
profanis

Reputation: 2751

I am not an expert on the animations but it seems that you have to separate the animations into two parts. One for the orbit and one for the planet.

As such, I gave it a try and I created two different trigger functions respectively.

Having only one trigger function, it's like it executes them sequentially. Once the first is done, the second is evaluated.

@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)'
        }))
      ])
    ])
  ]
})

and the 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>

Upvotes: 1

Related Questions