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

当我搜索爱奥尼亚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>

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

这是我的工作：）

---

我在

jquery

中使用了

fadeIn（）和
fadeout（）方法。希望这会对您有所帮助。
我想我可以找到解决方案，但我不确定如何在Ionic 2中实现它

（如果我得到了想要的结果，我会编辑这篇文章）
你可以这样做javascript@Ashishsah好的，我将对此进行搜索-可能我可以找到任何东西来解决我的问题为什么不在一定的时间间隔内隐藏图像并使用jquery
.fadeIn（）
method请添加代码中最相关的部分，所以我们可以用它创造一个劫掠者？在Ionic中使用jQuey不是一个好方法。相反，您可以只使用普通css或角度动画API。@Sebafereras好的，几分钟后，我将用我的代码示例编辑我的问题谢谢，但是我可以在淡出第一幅图像的同时淡入第二幅图像吗？所以您想，当第一幅图像淡出时，第二幅图像直接进入吗？是的，就像第一张图片前面显示的第二张图片一样，我想是因为延迟过渡时间，然后当它消失的时候。但是如果你想的话，试着调整时间转换
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";
      }
   }
}