html - 如何更改应用程序的过渡动画？

Question

我正在 ionic 4 中开发一个应用程序，它有一个画廊部分，现在提供的用户体验还有很多不足之处。

我想将应用程序的过渡动画更改为更类似于 Pinterest 的东西，有人知道如何实现吗？

我找到了一些在 Swift 和 objectic C 中实现这一点的存储库，但是它们非常旧，我无法让它们在当前版本的 Xcode 中编译得很好，我将找到的存储库留给了他们

https://github.com/xhzengAIB/PinterestAnimator

https://github.com/demonnico/PinterestSwift

我想达到这个效果

![过渡应用 Pinterest] https://camo.githubusercontent.com/fdae059a7511ddab4e3dfdf5337c1ab85f9e60e9/687474703a2f2f692e737461636b2e696d6775722e636f6d2f30666e43642e676966

![过渡应用 Pinterest] https://raw.githubusercontent.com/demon1105/ImagesLib/master/compressed.gif

我的画廊只不过是一个图像列表，点击它们会以模式显示。我想不出任何方法来获得我正在寻找的这种效果。

画廊：

  <div class="pins">
    <div class="pin" *ngFor="let image of images" (click)="openPreview(image)">
      <img [src]="image">
    </div>
  </div>

Galeria.page.ts：

  openPreview(img) {
    debugger;
    this.modalController.create({
      component:TiendaGaleriaModalPage,
      componentProps:{
        img:img
      }
    }).then(modal=>modal.present())
  }

预习：

<ion-slides pager="true" [options]="slideOpts">
    <ion-slide>
      <div class="swiper-zoom-container">
        <img [src]="img">
      </div>
    </ion-slide>
  </ion-slides>

Preview.page.ts：

ngOnInit() {
    this.img=this.navParams.get('img')
  }

标签： htmlionic4pinterestuiviewanimationtransition