在Ionic 2中，是否可以实现图像之间的淡入淡出动画？

Question

当我在查找Ionic 2的动画时，我发现了一些动画，但并不是我想要的。

我想要制作像"淡入淡出"这样的动画，比如说，我有5张图片，每2秒钟就会将当前的图片更换为其他图片，并使用淡入淡出效果。

我可以使用"setinterval"来重复我的代码，并在2秒后逐一更改我的图片，但我不知道是否能够实现淡入淡出动画！

以下是我的代码示例（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";
      }
   }
}

结果（我想让它们之间淡入淡出）

- Ali H

---

你可以使用JavaScript完成这个任务。 - Ashish sah

@Ashishsah 好的，我会搜索一下 - 也许我能找到解决我的问题的东西。 - Ali H

为什么不在一定时间间隔内隐藏图像，然后使用jQuery的“fadeIn()”方法呢？ - Ashish sah

请您添加代码中最相关的部分，这样我们就可以使用Plunker创建它了。在Ionic中使用jQuery不是一个好的方法。相反，您可以使用纯css或Angular动画API。 - sebaferreras

@sebaferreras 好的，我需要几分钟时间，然后会编辑我的问题并提供代码示例。 - Ali H

@sebaferreras现在您可以看到我的代码和结果，希望有一种方法可以在它们之间进行淡入淡出动画。 - Ali H

Answer 1

这是我的工作jsFiddle :)

我在jquery中使用了fadeIn()和fadeout()方法。希望这可以帮到你。

- bellabelle

---

谢谢，但是我能否在第二张图片淡出的同时淡入第二张图片？ - Ali H

所以您希望当第一张图片淡出时，第二张图片直接进入？ - bellabelle

是的，就像第二张图片显示在第一张前面一样。 - Ali H

我认为，由于延迟过渡时间的原因，所以当时间到了它就会淡出。但是如果你想的话，可以尝试调整过渡时间。 - bellabelle

Answer 2

我觉得我可能可以在这里找到解决方案，但我不确定如何在Ionic 2中实现它。

（如果我得到了想要的结果，我将编辑此帖子）

- Ali H