轉場效果可為使用者帶來許多好處，包括有助於確保轉換在使用上下文，以及縮短延遲時間的感知。開發人員希望能夠順暢切換頁面，提高使用者與網站的互動程度。
不過，啟用狀態轉換非常困難，因為開發人員必須管理兩個不同元素的狀態。就算只是簡單的交叉漸變效果，仍會同時出現這兩個狀態。這會造成可用性上的問題，例如處理傳出元素的額外互動。至於輔助裝置的使用者，則這兩種狀態會同時位於 DOM 中。此外，有些項目在樹狀圖中移動時可能呈現適當視覺效果，但很容易造成閱讀位置和焦點消失。
View Transitions API 於 Chrome 111 版推出，可讓使用者在頁面之間輕鬆建立流暢的轉換。可讓您在變更 DOM 時避免在狀態之間重疊，並使用快照檢視在各狀態之間加入轉場動畫。
您或許會想知道，實作方式是否簡單？用途有哪些？其他開發人員如何使用檢視畫面轉場效果？
本文將逐步說明在以下 4 個不同網站上實作觀看轉換的方式：RedBus (旅遊)、CyberAgent (新聞/網誌發布者)、Nykaa (eCommerce) 和 PolicyBazaar (保險)，以及使用 View Transitions API 為網站帶來的不同助益。
redBus
redBus 隸屬於 MakeMyTrip 集團，是總部位於印度班加羅爾的巴士訂票和售票網站，服務範圍遍及全球。這是率先使用 View Transitions API 實作體驗的網站之一。
Redbus 為何要導入觀看轉換功能？
redBus 的團隊堅信不懈地提供類似應用程式的整合式網路體驗，盡可能與原生應用程式相輔相成。事實上，他們多年來已採用多種自訂解決方案。舉例來說，他們在開發 View Transitions API 之前，針對頁面轉換推出自訂的 JavaScript 和 CSS 動畫。不過，他們必須處理中低網路和裝置的成效管理問題，有時他們必須採用自動調整式載入策略，才能帶來差異化體驗。
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 選擇導入觀看次數轉場功能，並改進整個網站，結果銷售量增加了 7%。redBus 資深工程經理 Amit Kumar 表示，對於真正希望獲得更優質的使用者體驗和降低維護負擔的使用者來說，觀看轉換效果是一大利器。
我們進行了全面的使用者意見回饋會議，整合不同群體使用者的寶貴洞見。我們對於使用者族群 (公車和鐵路) 及其需求，再加上我們的專業知識，因此認為這項功能在一開始就能提供重要的價值，而且不需要進行 A/B 測試。觀看轉場效果可以彌補應用程式和網站之間的鴻溝，提供流暢的瀏覽體驗。
RedBus 技術長 Anoop Menon
CyberAgent
CyberAgent 是一家日本的 IT 公司，提供網誌和新聞出版等多種線上服務。
CyberAgent 為何要實作檢視畫面轉換？
CyberAgent 曾考慮使用 CSS 動畫或架構來實作動畫轉場效果，希望改善使用者經驗，但他們擔心 DOM 轉譯方式和程式碼可維護性方面的效能不佳。當 Chrome 支援 View 轉換 API 後，便很高興能運用這個 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 Transitions API 的另一項有趣之處，在於 CyberAgent 使用 quicklink 輕鬆在詳細資料頁面上實作預先算繪規則。以下是他們的程式碼範例：
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 非常高興推出新的瀏覽轉場效果網頁使用者體驗，可以在其他網頁上導入畫面轉場功能。一起來看看他們的 Design 副總裁說：
我們會在可行的情況下，全力對即將推出的所有功能導入畫面轉換效果。我們已經確認了部分領域，並會在這些領域積極投入心力。
設計部門副總裁 Krishna R V
PolicyBazaar
PolicyBazaar 的總部位於古爾岡，是印度最大的保險集結和跨國金融科技公司。
PolicyBazaar 為何要導入檢視畫面轉換效果？
PolicyBazaar 團隊始終是網路優先的公司，致力在關鍵使用者旅程中盡可能提供最佳使用者體驗。常見的做法是，在 View Transitions API 推出前，使用 JavaScript 和 CSS 導入自訂轉場效果，因為他們不僅能改善使用者體驗、打造流暢的導覽流程，也改善了網站的整體視覺吸引力。
然而，由於這些自訂導入作業偶爾會發生為了效能而延遲、程式碼維護複雜，而且與使用的架構無法達到最佳相容性。View Transitions API 提供易於使用的介面，原生執行效能優勢，協助他們克服大部分挑戰。
PolicyBazaar 在事前報價流程中，利用了不同元素的觀看轉換效果，提高潛在買家的期待感，提供購買保單所需的詳細資料。
實作的技術細節
他們使用混合型架構方法，搭配 Angular 和 React 管理大部分程式碼集。以下是 VT 摘錄的《VT 摘錄》由 Aman Soni (PolicyBazaar 的首席開發人員) 分享：
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');
}
使用見證
該公司的設計 (Life BU) 負責人 Rishabh Mehrotra 指出，觀看轉場效果可以提高可用性、參與度和整體滿意度，進而改善網站體驗，這項技術不僅提供流暢的瀏覽體驗、引導式互動功能，也減少認知負荷和現代美感等。
提升網頁體驗是 PB 的首要目標，而 VT 經證實可帶來極為流暢的體驗，經證實可有效達成這項目標。對開發人員社群和使用者群抱有廣泛的吸引力，讓我們的團隊變得更加熱衷。在討論如何跨不同 POD 的整合時，我們預期客戶滿意度和營運表現將有深遠的正面影響。
Saurabh Tiwari (PolicyBazaar 技術長)
後續步驟
您有興趣試用觀看轉場功能嗎？以下提供幾項實用資源，歡迎多加利用：