CODEWITHSUNDEEP
csstypescriptanimationionic2
Ali H
Ali H

Reputation: 923

Is possible to make fade animation between images in Ionic 2

as I searched about the animations of Ionic 2. I found some animations but not as I want.

I want to make animation like "fade" between Images. For example, I have 5 images and after 2 seconds the current image changes to other with fade animation.

I could did the half of work by using "setinterval" to repeat my code and change my images one by one after 2 seconds but I don't know if I can to make fade animation or not!

This is a sample example for my code (HTML + TS + Sample Gif Image)

HTML

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <img src="imgs/{{variables.imageName}}.jpg">
</ion-content>

TS

export class HomePage {
   variables={
       imageName:"image1"
   }

  public loop1;

  constructor(public navCtrl: NavController) {
      this.loop1 = setInterval(() => {
          this.changeImage();
      }, 2000);
  }

  changeImage(){
      if(this.variables.imageName=="image1"){
          this.variables.imageName="image2";
      }
      else if(this.variables.imageName=="image2"){
          this.variables.imageName="image3";
      }
      else if(this.variables.imageName=="image3"){
          this.variables.imageName="image1";
      }
   }
}

Result (I want to make fade between them)

enter image description here

Upvotes: 3

Views: 1849

Answers (2)

Ali H
Ali H

Reputation: 923

I think I could find the solution here, but I'm not sure how can I implement it in Ionic 2

(I will edit this post if I got my wanted result)

Upvotes: 0

bellabelle
bellabelle

Reputation: 926

Here's my working jsFiddle :)

I used fadeIn() and fadeout() method in jquery. Hope this will help you.

Upvotes: 2

Related Questions