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: [...]
})
exportclassAppModule {
constructor(privateconfig: Config) {
this.config.setTransition("emptyTransition", EmptyTransition)
}
}
exportclassEmptyTransition extendsPageTransition {
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团队至少有一些关于此功能的官方文档。
