Ionic是編寫自己的應(yīng)用程序的絕佳框架。它基于Cordova和angular，使您能夠快速編寫外觀漂亮的應(yīng)用程序而無需太多精力。
根據(jù)您用來啟動應(yīng)用程序的平臺，Ionic甚至還帶有預(yù)定義的頁面過渡，以便將一個頁面的導(dǎo)航設(shè)置為另一個頁面。iOS上的標(biāo)準(zhǔn)頁面轉(zhuǎn)換是從左側(cè)或右側(cè)滑動。它看起來像這樣：
然而，Ionic頁面轉(zhuǎn)換的文檔非常令人困惑，作為一個初學(xué)者，需要一些時間來了解哪些轉(zhuǎn)換應(yīng)該使用哪些轉(zhuǎn)換。官方文檔包含NativePageTransitions模塊的頁面，但我建議您不要使用它。它不僅長時間沒有收到任何更新，而且為了制作動畫，模塊會截取起始頁和著陸頁的截圖，并為兩個圖像設(shè)置動畫。這似乎是一種奇怪的方式來做到這一點，而未解決問題的公開問題的數(shù)量說明了一切。
您應(yīng)該使用的是Ionic NavController類的集成功能，您已經(jīng)使用它來在頁面之間導(dǎo)航。默認(rèn)情況下啟用此功能（取決于平臺），但也可以使用導(dǎo)航呼叫進行配置：
this.navCtrl.push(MyPageComponent, null, {animate: true, animation: "transition"});?
使用“animate：true”可以打開動畫（這是標(biāo)準(zhǔn)設(shè)置），“animation：transition”設(shè)置用于動畫頁面過渡的動畫。它的字符串和“轉(zhuǎn)換”意味著根據(jù)當(dāng)前平臺使用標(biāo)準(zhǔn)轉(zhuǎn)換。當(dāng)你想在Android平臺上使用iOS轉(zhuǎn)換時，你可以像這樣啟動導(dǎo)航：
this.navCtrl.push(MyPageComponent, null, {animate: true, animation: "transition-ios"});?
沒有其他可以使用的內(nèi)置轉(zhuǎn)換（如向下滑動，向上滑動或向外擴展），我完全沒有找到如何實現(xiàn)自定義轉(zhuǎn)換的官方文檔。但是，有一種準(zhǔn)官方的方式來實現(xiàn)您自己的過渡。
您可以像實現(xiàn)官方轉(zhuǎn)換一樣實現(xiàn)自己的轉(zhuǎn)換類：編寫擴展“ionic-angular / PageTransition”類的自己的轉(zhuǎn)換類，并在離子運行時注冊新的轉(zhuǎn)換。
最基本的轉(zhuǎn)換如下所示：
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
????}
}
當(dāng)您查看iOS頁面轉(zhuǎn)換的官方實現(xiàn)時，您可以看到您可以使用ionic-angular提供的Animation類定義進入和離開頁面的動畫。由于沒有文檔我不得不使用試驗和錯誤如何找出如何使用這個類。
在搞砸了一段時間之后，我遇到了一些我自己的頁面轉(zhuǎn)換：“滑動”和“向下滑動”。
SlideTransition是一個左/右滑動過渡，類似于官方的“transition-ios”，但它動畫整個頁面內(nèi)容而不僅僅是內(nèi)容，而頁眉和頁腳元素保持固定。
然而，SlideDownTransition有點不同。它會向下滑動離開的頁面內(nèi)容，并在執(zhí)行此操作時顯示輸入的頁面內(nèi)容。
SlideTransition經(jīng)過測試，可以在向前和向后轉(zhuǎn)換中工作（想想：Android后退按鈕）。SlideDownTransition可能不起作用，但我沒有測試它，因為我的用例不需要它工作。
令人討厭的是，官方轉(zhuǎn)換是手動控制標(biāo)題組件中標(biāo)準(zhǔn)后退按鈕的可見性。我不明白為什么這是在頁面轉(zhuǎn)換中完成而不是某種后退按鈕組件。因此，我放棄了在我的應(yīng)用程序中使用官方后退按鈕，并在需要時始終使用我自己的按鈕（情況并非總是如此）。因此，上述頁面轉(zhuǎn)換的實現(xiàn)并不關(guān)心后退按鈕的可見性，因此標(biāo)準(zhǔn)后退按鈕始終是不可見的。
使用Ionic Animation類，您可以定義一些開始和結(jié)束樣式，然后在離子頁面的頁面元素上設(shè)置。樣式是我們眾所周知的CSS樣式，不使用BrowserAnimationsModule提供的角度動畫功能。實現(xiàn)轉(zhuǎn)換相對簡單，因為您可以調(diào)整之前在Web應(yīng)用程序中使用的眾所周知的轉(zhuǎn)換的大部分代碼。
但是，我希望Ionic團隊至少有一些關(guān)于此功能的官方文檔。
