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

【问题标题】：Is possible to make fade animation between images in Ionic 2可以在 Ionic 2 中的图像之间制作淡入淡出动画
【发布时间】：2018-02-08 20:28:45
【问题描述】：

当我搜索 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>

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

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

【问题讨论】：

你可以用javascript做到这一点
@Ashishsah 好的，我会搜索一下 - 也许我能找到任何可以解决我的问题的东西
为什么不在特定的时间间隔隐藏图像而只使用 jquery .fadeIn() 方法
能否请您添加代码中最相关的部分，以便我们可以使用它创建一个 plunker？在 Ionic 中使用 jQuey 不是一个好方法。相反，您可以只使用普通的 css 或 Angular 动画 API。
@sebaferreras 好的，几分钟后，我将用我的代码示例编辑我的问题

标签： css typescript animation ionic2

【解决方案1】：

这是我的工作jsFiddle :)

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

【讨论】：

谢谢，但是我可以在淡出第一张图片的同时淡入第二张图片吗？
所以你想，当第一张图像淡出时，第二张图像直接进入？
是的，就像第二张图片显示在第一张图片前面一样
我认为，由于延迟过渡时间，然后当它淡出时。但如果需要，请尝试调整时间转换

【解决方案2】：

我想我可以找到解决方案 here，但我不确定如何在 Ionic 2 中实现它

（如果我得到想要的结果，我会编辑这篇文章）

【讨论】：