css - 可以在 Ionic 2 中的图像之间制作淡入淡出动画

Question

当我搜索 Ionic 2 的动画时。我找到了一些动画，但不是我想要的。

我想在图像之间制作类似“淡入淡出”的动画。例如，我有 5 张图像，2 秒后当前图像变为其他带有淡入淡出动画的图像。

我可以通过使用“setinterval”重复我的代码并在 2 秒后一张一张地更改我的图像来完成一半的工作，但我不知道我是否可以制作淡入淡出动画!

这是我的代码示例(HTML + TS + 示例 Gif 图片)

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";
      }
   }
}

结果(我想在它们之间淡入淡出)

Answer 1

这是我的工作 jsFiddle :)

我在 jquery 中使用了 fadeIn() 和 fadeout() 方法。希望这对您有所帮助。