CODEWITHSUNDEEP
angulartypescriptangular-animations
Gytree
Gytree

Reputation: 540

Angular 5 animations, rotateZ

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:

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?

Upvotes: 0

Views: 695

Answers (1)

Vishal Biradar
Vishal Biradar

Reputation: 1229

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

Upvotes: 1

Related Questions