上面按了按鈕跳轉畫面的時候可以指定呈現不同的轉場動畫效果。
雖然這對我們沒有什麼意義，但是我們也不能不照顧到眼明人的視覺感受，
所以這部份我沒有省略，還是提出來給大家參考。
轉場效果由 onTap 函數控制，我先把可用的效果列出來：
| 效果 | 支援平台 | 說明 |
|---|---|---|
| curlUp | iOS | 上捲 |
| curlDown | iOS | 下捲 |
| explode | Android （5 以上） | 爆炸 |
| fade | Android, iOS | 淡入,淡出 |
| flipRight | Android, iOS | 向右彈出 |
| flipLeft | Android, iOS | 向左彈出 |
| slideLeft | Android, iOS | 往左滑出 |
| slideRight | Android, iOS | 往右滑出 |
| slideTop | Android, iOS | 往上滑出 |
| slideBottom | Android, iOS | 往下滑出 |
改寫 home.js 如下：
var frame = require("ui/frame");
var navigationEntry = {
moduleName: "home/about",
transition: {
name: "slideBottom"
}
};
function onTap() {
frame.topmost().navigate(navigationEntry);
}
exports.onTap = onTap;修改的部份首先定義一個物件 navigationEntry 用來存放要跳轉的畫面 "home/about" 和轉場效果 "slideBottom".
再把先前 navigate 函數要跳轉的對象替換成這個物件。
請注意上面用的轉場效果是 "slideBottom", 當返回的時候就會自動換成 "slideTop".
