Angular 5 animations, rotateZ

Question

i have traying to make a rotation animation over a group of images using the angular animation library but i can't make it work.

task:

import the BrowserAnimationModule [done]
import the animations functions in my component [done]

so this is the component code:

@Component({
  selector: 't-animation',
  templateUrl: './t-animation.component.html',
  styleUrls: ['./t-animation.component.css'],
  animations: [
    trigger('imgAnimation', [
      state("stop", style({ transform: 'rotateZ(0)' })),
      state("a", style({ transform: 'rotateZ(90)' })),
      state("b", style({ transform: 'rotateZ(180)' })),
      transition('* => *', [style({ transform: 'rotateZ(90)' }), animate('100ms ease-in')]),
    ]),
  ]
})
export class TAnimationComponent implements OnInit {

  running = true;
  animation_state;

  constructor() {
    this.animation_state = "stop";
  }

  ngOnInit() {
    this.startAnimation();
  }

  startAnimation() {
    this.running = true;
    this.animation_state = 'a';
  }

  stopAnimation() {
    this.running = false;
  }

}

the html code

<div class="images-container">
  <img [@imgAnimation]="animation_state" [src]="'assets/img/animate-1.png'">
  <img [@imgAnimation]="animation_state" [src]="'assets/img/animate-2.png'">
  <img [@imgAnimation]="animation_state" [src]="'assets/img/animate-3.png'">

</div>


<button (click)="startAnimation()">toggle</button>

any advice?

score 1 · Answer 1 · answered May 08 '18 at 12:15

1

To rotate the images by 360 degrees,

trigger('rotatedState', [
            state('default', style({ transform: 'rotate(0)' })),
            state('rotated', style({ transform: 'rotate(-360deg)' })),
            transition('rotated => default', animate('1500ms ease-out')),
            transition('default => rotated', animate('400ms ease-in'))
        ])

Demo here

Hope this will help you...

answered May 08 '18 at 12:15

Vishal Biradar

1,219
2
12
24

thk for your answer, with the example that you give me i finally do it, the rotate works but the time of animations not. the explorer rotate the image immediately. Do you have any idea why it happens? – Gytree May 08 '18 at 20:14

Angular 5 animations, rotateZ

1 Answers1