Ionic是編寫(xiě)自己的應(yīng)用程序的絕佳框架惯殊。它基于Cordova和angular挨决，使您能夠快速編寫(xiě)外觀漂亮的應(yīng)用程序而無(wú)需太多精力。
根據(jù)您用來(lái)啟動(dòng)應(yīng)用程序的平臺(tái)，Ionic甚至還帶有預(yù)定義的頁(yè)面過(guò)渡兔沃，以便將一個(gè)頁(yè)面的導(dǎo)航設(shè)置為另一個(gè)頁(yè)面根灯。iOS上的標(biāo)準(zhǔn)頁(yè)面轉(zhuǎn)換是從左側(cè)或右側(cè)滑動(dòng)逻谦。它看起來(lái)像這樣：
然而，Ionic頁(yè)面轉(zhuǎn)換的文檔非常令人困惑史汗，作為一個(gè)初學(xué)者饮焦，需要一些時(shí)間來(lái)了解哪些轉(zhuǎn)換應(yīng)該使用哪些轉(zhuǎn)換怕吴。官方文檔包含NativePageTransitions模塊的頁(yè)面，但我建議您不要使用它县踢。它不僅長(zhǎng)時(shí)間沒(méi)有收到任何更新转绷，而且為了制作動(dòng)畫(huà)，模塊會(huì)截取起始頁(yè)和著陸頁(yè)的截圖硼啤，并為兩個(gè)圖像設(shè)置動(dòng)畫(huà)议经。這似乎是一種奇怪的方式來(lái)做到這一點(diǎn)，而未解決問(wèn)題的公開(kāi)問(wèn)題的數(shù)量說(shuō)明了一切谴返。
您應(yīng)該使用的是Ionic NavController類(lèi)的集成功能煞肾，您已經(jīng)使用它來(lái)在頁(yè)面之間導(dǎo)航。默認(rèn)情況下啟用此功能（取決于平臺(tái)）亏镰，但也可以使用導(dǎo)航呼叫進(jìn)行配置：
this.navCtrl.push(MyPageComponent, null, {animate: true, animation: "transition"});?
使用“animate：true”可以打開(kāi)動(dòng)畫(huà)（這是標(biāo)準(zhǔn)設(shè)置）扯旷，“animation：transition”設(shè)置用于動(dòng)畫(huà)頁(yè)面過(guò)渡的動(dòng)畫(huà)。它的字符串和“轉(zhuǎn)換”意味著根據(jù)當(dāng)前平臺(tái)使用標(biāo)準(zhǔn)轉(zhuǎn)換索抓。當(dāng)你想在Android平臺(tái)上使用iOS轉(zhuǎn)換時(shí)钧忽，你可以像這樣啟動(dòng)導(dǎo)航：
this.navCtrl.push(MyPageComponent, null, {animate: true, animation: "transition-ios"});?
沒(méi)有其他可以使用的內(nèi)置轉(zhuǎn)換（如向下滑動(dòng)，向上滑動(dòng)或向外擴(kuò)展）逼肯，我完全沒(méi)有找到如何實(shí)現(xiàn)自定義轉(zhuǎn)換的官方文檔耸黑。但是，有一種準(zhǔn)官方的方式來(lái)實(shí)現(xiàn)您自己的過(guò)渡篮幢。
您可以像實(shí)現(xiàn)官方轉(zhuǎn)換一樣實(shí)現(xiàn)自己的轉(zhuǎn)換類(lèi)：編寫(xiě)擴(kuò)展“ionic-angular / PageTransition”類(lèi)的自己的轉(zhuǎn)換類(lèi)大刊，并在離子運(yùn)行時(shí)注冊(cè)新的轉(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頁(yè)面轉(zhuǎn)換的官方實(shí)現(xiàn)時(shí)三椿，您可以看到您可以使用ionic-angular提供的Animation類(lèi)定義進(jìn)入和離開(kāi)頁(yè)面的動(dòng)畫(huà)缺菌。由于沒(méi)有文檔我不得不使用試驗(yàn)和錯(cuò)誤如何找出如何使用這個(gè)類(lèi)。
在搞砸了一段時(shí)間之后搜锰，我遇到了一些我自己的頁(yè)面轉(zhuǎn)換：“滑動(dòng)”和“向下滑動(dòng)”伴郁。
SlideTransition是一個(gè)左/右滑動(dòng)過(guò)渡，類(lèi)似于官方的“transition-ios”蛋叼，但它動(dòng)畫(huà)整個(gè)頁(yè)面內(nèi)容而不僅僅是內(nèi)容焊傅，而頁(yè)眉和頁(yè)腳元素保持固定剂陡。
然而，SlideDownTransition有點(diǎn)不同狐胎。它會(huì)向下滑動(dòng)離開(kāi)的頁(yè)面內(nèi)容鸭栖，并在執(zhí)行此操作時(shí)顯示輸入的頁(yè)面內(nèi)容。
SlideTransition經(jīng)過(guò)測(cè)試握巢，可以在向前和向后轉(zhuǎn)換中工作（想想：Android后退按鈕）晕鹊。SlideDownTransition可能不起作用，但我沒(méi)有測(cè)試它镜粤，因?yàn)槲业挠美恍枰ぷ鳌?/p>
令人討厭的是捏题，官方轉(zhuǎn)換是手動(dòng)控制標(biāo)題組件中標(biāo)準(zhǔn)后退按鈕的可見(jiàn)性玻褪。我不明白為什么這是在頁(yè)面轉(zhuǎn)換中完成而不是某種后退按鈕組件肉渴。因此，我放棄了在我的應(yīng)用程序中使用官方后退按鈕带射，并在需要時(shí)始終使用我自己的按鈕（情況并非總是如此）同规。因此，上述頁(yè)面轉(zhuǎn)換的實(shí)現(xiàn)并不關(guān)心后退按鈕的可見(jiàn)性窟社，因此標(biāo)準(zhǔn)后退按鈕始終是不可見(jiàn)的券勺。
使用Ionic Animation類(lèi)，您可以定義一些開(kāi)始和結(jié)束樣式灿里，然后在離子頁(yè)面的頁(yè)面元素上設(shè)置关炼。樣式是我們眾所周知的CSS樣式，不使用BrowserAnimationsModule提供的角度動(dòng)畫(huà)功能匣吊。實(shí)現(xiàn)轉(zhuǎn)換相對(duì)簡(jiǎn)單儒拂，因?yàn)槟梢哉{(diào)整之前在Web應(yīng)用程序中使用的眾所周知的轉(zhuǎn)換的大部分代碼。
但是色鸳，我希望Ionic團(tuán)隊(duì)至少有一些關(guān)于此功能的官方文檔社痛。
