轉場效果對使用者有許多好處，包括協助他們掌握情境，並減少延遲感知。開發人員希望能在頁面之間流暢切換，提高使用者與網站的互動程度。
然而，由於需要開發人員管理兩個不同元素的狀態，因此啟用狀態轉換並不容易。即使是簡單的跨淡出效果，也需要同時顯示兩種狀態。這會導致可用性問題，例如處理傳出元素的其他互動。對於輔助裝置使用者，DOM 會同時顯示前後狀態。此外，樹狀結構中的項目可能會以視覺上看起來沒問題的方式移動，但很容易導致閱讀位置和焦點遺失。
View Transitions API 已在 Chrome 111 推出，可讓您在頁面之間建立流暢簡單的轉場效果。這可以讓您在狀態之間不重疊的情況下變更 DOM，並使用快照檢視在狀態之間建立轉換動畫。
您可能會好奇，這項功能的實作難易度如何？有哪些用途？其他開發人員如何使用檢視畫面轉場效果？
本文將說明如何在 4 個不同網站上導入檢視轉換效果：RedBus (旅遊)、CyberAgent (新聞/網誌發布者)、Nykaa (電子商務) 和 PolicyBazaar (保險)，以及使用 View Transitions API 為網站帶來哪些好處。
redBus
redBus 是 MakeMyTrip 集團旗下的巴士預訂和車票網站，總部位於印度班加羅，在全球各地設有據點。這是第一批採用 View Transitions API 實作體驗的網站之一。
Redbus 為何導入檢視畫面轉場效果？
RedBus 團隊致力提供類似應用程式的整合式網頁體驗，盡可能讓使用者靠近原生應用程式。事實上，他們多年以來已導入多種自訂解決方案。舉例來說，他們推出網頁轉換時的自訂 JavaScript 和 CSS 動畫，甚至在 View Transitions API 開發前就推出。不過，這也代表他們必須在網路和裝置的較低區段中處理效能管理問題，有時會導致自適應載入策略帶來不同的使用體驗。
redBus 針對多個使用者歷程使用觀看轉場效果。例如在行動應用程式中的自助專區，該專區會在自訂 Chrome 分頁中開啟網頁，以及在巴士票預訂漏斗中，使用者會從商品目錄清單頁面前往付款頁面。如果是後者的情況，使用者能更順暢地瀏覽網頁，轉換率因此提高。這是因為在執行大量作業 (例如擷取最新可用的廣告空間) 時，使用者體驗和感知成效皆有所提升。
實作的技術細節
redBus 使用 React 和 EJS 做為前端技術堆疊，並在不同旅程中結合 SPA 和 MPA。以下程式碼摘錄顯示如何使用檢視畫面轉場效果：
/* Forward Transition */
export const goToURL = ( url: string , reactHistory: any ): void => {
if(document.startViewTransition) {
let viewTransition = document.startViewTransition();
viewTransition.ready.finally(() => {
reactHistory ? reactHistory.push(url) : (window.location.href = url);
})
} else {
reactHistory ? reactHistory.push(url) : (window.location.href = url);
}
};
/* Back Transition */
export const goBack = ( reactHistory: any ): void => {
if(document.startViewTransition) {
document.documentElement.classList.add('back-transition');
let viewTransition = document.startViewTransition();
viewTransition.ready.finally(() => {
reactHistory ? reactHistory.goBack() : history.back();
})
viewTransition.finished.finally(() => {
document.documentElement.classList.remove('back-transition');
})
} else {
reactHistory ? reactHistory.goBack() : history.back();
}
};
在以下 CSS 中，slide-to-right、slide-to-left、slide-from-right 和 slide-from-left 是 CSS 動畫關鍵影格。
::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(root) {
animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
.back-transition::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}
.back-transition::view-transition-new(root) {
animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
}
業務影響
redBus 選擇在網站上導入觀看轉換功能，並改善 INP，結果銷售量增加 7%。redBus 資深工程管理員 Amit Kumar 表示，如果您希望提供更優質的使用者體驗，並減少維護成本，檢視轉場效果會是您的最佳選擇。
我們已進行全面的使用者意見回饋活動，納入不同使用者群組提供的寶貴洞察資料。我們深知使用者群 (公車和鐵路) 及其需求，加上我們專業的技術，因此相信這項功能一推出就能提供重大價值，無須進行 A/B 版本測試。檢視畫面轉場效果有助於消除應用程式和網站之間的落差，提供流暢的瀏覽體驗。
redBus 技術長 Anoop Menon
CyberAgent
CyberAgent 是一家位於日本的 IT 公司，提供許多線上服務，包括網誌和新聞發布。
CyberAgent 為何要導入檢視區塊轉換？
CyberAgent 曾考慮使用 CSS 動畫或架構來實作動畫轉場效果，以改善使用者體驗，但他們擔心在轉譯 DOM 和程式碼可維護性方面，效能會不佳。當 Chrome 新增 View transitions API 支援功能後，他們很高興能使用這項功能，創造引人入勝的頁面轉場效果，克服這些挑戰。
CyberAgent 在網誌清單和網誌頁面之間實作了檢視畫面轉場效果。請注意，他們如何在主圖片中加入元素轉場效果。你可以造訪他們的網站，立即體驗直播功能。
他們也使用媒體查詢，為不同裝置設計不同的動畫體驗。他們在行動版網頁中加入了元素轉場效果，但這會讓電腦版網頁出現過多動態效果。
@media screen and (min-width: 769px) {
.main-visual {
view-transition-name: none !important;
}
}
實作技術細節
CyberAgent 使用 Next.js 建構 SPA。以下程式碼範例說明如何使用 View Transition API。
export const usePageTransition = () => {
const router = useRouter();
const defferedRef = useRef<Deferred | null>(null);
useEffect(() => {
const handleRouteChangeComplete = () => {
defferedRef.current?.resolve();
};
const handleRouteChangeStart = (url: string) => {
if (!("startViewTransition" in document)) return;
if (router.asPath === url) return;
const deffered = new Deferred();
defferedRef.current = deffered;
(document as Document).startViewTransition(async () => {
await deffered.promise;
});
};
router.events.on("routeChangeStart", handleRouteChangeStart);
router.events.on("routeChangeComplete", handleRouteChangeComplete);
return () => {
router.events.off("routeChangeStart", handleRouteChangeStart);
router.events.off("routeChangeComplete", handleRouteChangeComplete);
};
}, [router.asPath]);
};
查看更多 Next.js 程式碼範例。
使用預先算繪技術的 MPA 轉換畫面
CyberAgent 也在新聞入口網站網站 Ameba News 服務試用 View Transitions API for Multiple Page Apps (MPA) (目前位於標記 chrome://flags/#view-transition-on-navigation 下)。
觀看轉場效果在兩個地方使用：第一種是變更新聞類別時，請看以下影片。
第二個是新聞精選頁面，其中會顯示內容摘要，當使用者點選「查看更多詳細資料」時，文章的其餘部分會淡入。
有趣的是，他們只在按下按鈕後會變更的部分加入動畫。只要稍微調整動畫設計，就能讓 MPA 網頁從使用者視角看起來更像 SPA 中心，而且只有新內容會在以下位置顯示：
他們的做法如下：為網頁的不同部分指派不同的 view-transition-name。舉例來說，他們將一個 view-transition-name 指派給文章頂端，另一個指派給底部，並未在頂端加入動畫。
::view-transition-old(root) {
animation:
var(--animation-disappear-duration) var(--animation-disappear-easing) both fade-out;
}
::view-transition-new(root) {
animation:
var(--animation-appear-in-duration) var(--animation-appear-in-easing) both fade-in;
}
CyberAgent 使用 View 轉換 API 的另一個有趣之處，是利用快速連結在詳細資料頁面上輕鬆導入預先算繪規則。以下是程式碼範例：
import { prerender } from ‘https://.../quicklink.mjs’;
window.addEventListener('load', () => {
const match = location.pathname.match(/\\/(.+)\\/hl\\/([0-9a-z-_]+)/);
if (!match) return;
const [_, dirname, entryId] = match;
prerender(`/${dirname}/${entryId}/`);
});
如要進一步瞭解快速連結導入方式，請參閱這篇文章。
客戶感言
CyberAgent 的 Ameba 服務技術負責人 Kazunari Hara 表示，由於以下兩個原因，觀看轉換可能會對業務造成重大影響。
首先是引導使用者瀏覽網頁。透過轉場效果，您可以讓使用者將視覺重點放在最重要的訊息上，並協助他們充分利用網頁。還能透過動畫強化及強調品牌。CyberAgent 以指定動畫設計來傳達品牌形象。有了檢視畫面轉換功能，他們不必維護外部程式庫，就能導入這項品牌體驗。
「View Transitions」是我最喜歡的其中一項 API。藉由新增動畫做為標準瀏覽器功能，相較於其他依附程式庫的解決方案，檢視畫面轉場效果可更輕鬆實作及維護。我們期待將這項功能導入更多服務，以便宣傳我們的品牌。
Ameba 技術長 Kazunari Hara
尼卡
Nykaa 是印度最大的時尚與美容電子商務平台，他們的目標是提供盡可能貼近原生應用程式體驗的行動版網站體驗。他們先前嘗試導入轉場動畫時，就遇到了編寫複雜自訂 JavaScript 的難題。這也對他們的網站效能造成輕微影響。
Nykaa 為何導入檢視畫面轉場效果？
視角轉換出現後，Nykaa 的團隊發現這是原生可進行的轉換，因此即使不犧牲效能，也可以大幅改善頁面轉換的使用者體驗。Nykaa 大量使用瀏覽轉場效果，從產品詳細資料頁面轉換至產品資訊頁面。
實作技術細節
Nykaa 使用 React 和 Emotion 建構 SPA。如要進一步瞭解如何使用 React 搭配 View 轉場效果，請參閱這篇文章。
if (document.startViewTransition) {
document.startViewTransition(() => {
history.push(productUrl);
});
} else {
history.push(productUrl);
}
const fadeIn = keyframes`
from { opacity: 0; }
`;
const fadeOut = keyframes`
to { opacity: 0; }
`;
const slideFromRight = keyframes`
from { transform: translateX(300px); }
`;
const slideToLeft = keyframes`
to { transform: translateX(-300px); }
`;
const slideToRight = keyframes`
to { transform: translateX(300px); }
`;
const slideFromLeft = keyframes`
from { transform: translateX(-300px); }
`
側邊抽屜動畫的 CSS：
::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both ${fadeOut},
1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideToLeft};
}
::view-transition-new(root) {
animation: 400ms cubic-bezier(0, 0, 0.2, 1) 300ms both ${fadeIn},
1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideFromRight};
}
.back-transition {
display: inherit;
}
.back-transition::view-transition-old(root) {
animation-name: fade-out, ${slideToRight};
}
.back-transition::view-transition-new(root) {
animation-name: fade-in, ${slideFromLeft};
}
客戶感言
Nykaa 應用程式主管 Sunit Jindal 表示，這項功能最大的優點是「速度感」。Nykaa 使用閃爍效果等待內容從後端載入，但發現顯示閃爍效果無法讓使用者知道需要等待多久才能載入內容。使用檢視畫面轉場效果時，轉場效果本身會讓使用者感覺「某些事情即將發生」，因此等待時間不會那麼難熬。
Nykaa 非常高興網頁的使用者體驗經過強化，並且已準備好在其他網頁上導入視圖轉場效果。以下是他們的設計副總裁所言：
我們強烈建議你盡可能在即將推出的所有功能中，導入檢視區塊轉場效果。我們已找出一些領域，並積極在這些領域投資。
設計部門副總裁 Krishna R V
PolicyBazaar
PolicyBazaar 總部位於古爾岡，是印度最大的保險集結網站和跨國金融科技公司。
PolicyBazaar 為何導入檢視畫面轉場效果？
作為一家以網路為優先的公司，PolicyBazaar 團隊一直致力於在重要使用者歷程中提供最優質的使用者體驗。在 View Transitions API 推出之前，使用者就已普遍採用 JavaScript 和 CSS 實作自訂轉場效果，因為這類效果可提升使用者體驗、建立流暢的導覽流程，並改善網站的整體視覺吸引力。
不過，這些自訂實作項目不時會產生因效能延遲、程式碼維護的複雜問題，而且與所用架構的相容性不盡理想。他們透過 View Transitions API 提供的簡單易用介面，克服了大部分的挑戰，並獲得原生效能優勢。
PolicyBazaar 在報價前流程中使用了不同元素的畫面轉場效果，讓潛在買家在提供購買保險商品所需的詳細資料時，能感受到更豐富的體驗。
實作的技術細節
他們採用混合式架構方法，其中 Angular 和 React 佔據了大部分程式碼基底。以下是 VT 程式碼摘錄自 Aman Soni (PolicyBazaar 主要前端開發人員) 使用 Angular 撰寫的程式碼：
toggleWidgetAnimation() {
let doc:any = document;
if (!doc.startViewTransition) {
this.toggleWidget();
return;
}
doc.startViewTransition(() => this.toggleWidget());
}
toggleWidget() {
let badgeEle = document.querySelector('.animate_init_state_one');
let textEle = document.querySelector('.animate_init_state_two');
badgeEle.classList.toggle('hide');
textEle.classList.toggle('hide');
}
客戶感言
設計總監 Rishabh Mehrotra 表示，透過改善可用性、參與度和整體滿意度，檢視轉場可為使用者提供更優質的網站體驗。這有助於提供流暢的導覽、引導式互動、降低認知負擔、現代美學等多項功能。
提升網頁體驗是 PB 的首要目標，而 VT 已證明是達成這項目標的絕佳工具，可提供流暢無礙的使用體驗。這款應用程式在開發人員社群和使用者族群中廣受歡迎，也讓我們的團隊充滿熱情。在我們努力整合不同 POD 之後，我們預計會對滿意度和營運表現帶來極大的正面影響。
PolicyBazaar 技術長 Saurabh Tiwari
後續步驟
您是否有興趣試用觀看轉場效果？以下提供一些實用資源，方便您進一步瞭解相關資訊：