如何在Ionic3应用程序中实现自定义页面过渡

Ionic是编写自己的应用程序的绝佳框架。它基于Cordova和angular，使您能够快速编写外观漂亮的应用程序而无需太多精力。

根据您用来启动应用程序的平台，Ionic甚至还带有预定义的页面过渡，以便将一个页面的导航设置为另一个页面。iOS上的标准页面转换是从左侧或右侧滑动。它看起来像这样：

然而，Ionic页面转换的文档非常令人困惑，作为一个初学者，需要一些时间来了解哪些转换应该使用哪些转换。官方文档包含NativePageTransitions模块的页面，但我建议您不要使用它。它不仅长时间没有收到任何更新，而且为了制作动画，模块会截取起始页和着陆页的截图，并为两个图像设置动画。这似乎是一种奇怪的方式来做到这一点，而未解决问题的公开问题的数量说明了一切。

您应该使用的是Ionic NavController类的集成功能，您已经使用它来在页面之间导航。默认情况下启用此功能（取决于平台），但也可以使用导航呼叫进行配置：

this.navCtrl.push(MyPageComponent, null, {animate: true, animation: "transition"}); 

使用“animate：true”可以打开动画（这是标准设置），“animation：transition”设置用于动画页面过渡的动画。它的字符串和“转换”意味着根据当前平台使用标准转换。当你想在Android平台上使用iOS转换时，你可以像这样启动导航：

this.navCtrl.push(MyPageComponent, null, {animate: true, animation: "transition-ios"}); 

您可以像实现官方转换一样实现自己的转换类：编写扩展“ionic-angular / PageTransition”类的自己的转换类，并在离子运行时注册新的转换。没有其他可以使用的内置转换（如向下滑动，向上滑动或向外扩展），我完全没有找到如何实现自定义转换的官方文档。但是，有一种准官方的方式来实现您自己的过渡。

最基本的（空）转换如下所示：

import {NgModule} from "@angular/core";
 import {Config, IonicApp, PageTransition} from "ionic-angular";
 import {MyApp} from "./app.component";@NgModule({declarations: [MyApp],imports: [...],bootstrap: [IonicApp],entryComponents: [MyApp,...],providers: [...]
 })
 export class AppModule {constructor(private config: Config) {this.config.setTransition("emptyTransition", EmptyTransition)}
 }export class EmptyTransition extends PageTransition {init() {//here would be the implementation of your own page transition}
 }

在搞砸了一段时间之后，我遇到了一些我自己的页面转换：“滑动”和“向下滑动”。当您查看iOS页面转换的官方实现时，您可以看到您可以使用ionic-angular提供的Animation类定义进入和离开页面的动画。由于没有文档我不得不使用试验和错误如何找出如何使用这个类。

SlideTransition是一个左/右滑动过渡，类似于官方的“transition-ios”，但它动画整个页面内容而不仅仅是内容，而页眉和页脚元素保持固定。

然而，SlideDownTransition有点不同。它会向下滑动离开的页面内容，并在执行此操作时显示输入的页面内容。

SlideTransition经过测试，可以在向前和向后转换中工作（想想：Android后退按钮）。SlideDownTransition可能不起作用，但我没有测试它，因为我的用例不需要它工作。

令人讨厌的是，官方转换是手动控制标题组件中标准后退按钮的可见性。我不明白为什么这是在页面转换中完成而不是某种后退按钮组件。因此，我放弃了在我的应用程序中使用官方后退按钮，并在需要时始终使用我自己的按钮（情况并非总是如此）。因此，上述页面转换的实现并不关心后退按钮的可见性，因此标准后退按钮始终是不可见的。

使用Ionic Animation类，您可以定义一些开始和结束样式，然后在离子页面的页面元素上设置。样式是我们众所周知的CSS样式，不使用BrowserAnimationsModule提供的角度动画功能。实现转换相对简单，因为您可以调整之前在Web应用程序中使用的众所周知的转换的大部分代码。

但是，我希望Ionic团队至少有一些关于此功能的官方文档。