檢視轉場效果可在網頁或應用程式 UI 的不同狀態之間,產生動畫且順暢的轉場效果。View Transition API 的設計用意是讓您以比過去更直接且有效率的方式建立這些效果。與先前的 JavaScript 方法相比,此 API 有許多優點,包括:
- 改善使用者體驗:流暢的轉場效果和視覺提示能夠引導使用者變更 UI,讓導覽看起來更自然,不干擾使用者。
- 視覺連貫性:維持檢視畫面之間的連續性,有助於減少認知負荷,並有助於使用者在應用程式中保持專注。
- 效能:API 會盡可能減少使用主要執行緒資源,產生更順暢的動畫。
- 現代美感:轉場效果經過改善,可提升使用者的使用體驗。
本文是系列文章的一部分,其中會討論電子商務公司如何使用新的 CSS 和 UI 功能改善網站。在本文中,瞭解部分公司如何導入 View Transition API,並從中獲益。
redBus
redBus 一直以來都嘗試盡可能打造一致的原生與網頁體驗。在 View Transition API 之前,將這些動畫套用到我們的網路資產是很有挑戰性的。但透過使用 API,我們發現這樣的 API 符合直覺,在多個使用者歷程之間建立轉場效果,打造更接近應用程式的使用體驗。再加上效能方面的優點,才能讓所有網站都具備這項功能。—redBus 資深工程經理 Amit Kumar。
團隊已在多個位置實作檢視轉換功能。以下是首頁登入圖示上的淡入和滑入動畫範例。
程式碼
這項實作會使用多個 view-transition-name
和自訂動畫 (scale-down
和 scale-up
)。搭配不重複的值使用 view-transition-name
,可將登入元件和網頁的其他部分分開建立動畫。建立新的不重複 view-transition-name
也會在虛擬元素樹狀結構中建立新的 ::view-transition-group
(如以下程式碼所示),以便與預設的 ::view-transition-group(root)
分開處理。
::view-transition
├─::view-transition-group(root)
│ └─…
├─::view-transition-group(signin)
│ └─…
└─::view-transition-group(signinclose)
└─…
//Code for VT for login
if (!document.startViewTransition) {
this.setState(
{
closeSigninModal: condition ? true : false
},
() => {
if (closeSigninCb) {
closeSigninCb();
}
}
);
} else {
const transition = document.startViewTransition();
transition.ready.finally(() => {
setTimeout(() => {
this.setState(
{
closeSigninModal: condition ? true : false
},
() => {
if (closeSigninCb) {
closeSigninCb();
}
}
);
}, 500);
});
}
.signin_open {
view-transition-name: signin;
}
.signin_close {
view-transition-name: signinclose;
}
::view-transition-group(signin),
::view-transition-group(signinclose) {
animation-duration: 0.5s;
}
::view-transition-old(signin) {
animation-name: -ua-view-transition-fade-out, scale-down;
}
::view-transition-new(signin) {
animation-name: -ua-view-transition-fade-in, scale-up;
}
::view-transition-new(signinclose) {
animation-name: -ua-view-transition-fade-out, scale-down;
}
@keyframes scale-down {
to {
scale: 0;
}
}
@keyframes scale-up {
from {
scale: 0;
}
}
Tokopedia
團隊在使用者切換產品縮圖時,使用觀看轉場效果新增淡出動畫。
實作起來十分簡單,與先前的實作相比,使用
startViewTransition
就能立即獲得更好的淡出轉場效果,而且不會產生任何影響,例如 Tokopedia 資深軟體工程師 Andy Wihalim。
使用前
使用後
程式碼
以下程式碼使用 React 架構,並包含架構專屬程式碼,例如 flushSync.
。進一步瞭解如何使用架構實作檢視區塊轉換。此為基本實作項目,可檢查瀏覽器是否支援 startViewTransition
,如果支援,也會進行轉換。否則,就會改回使用預設行為。
const handleClick =
({ url, index }) =>
() => {
if ('startViewTransition' in document) { //check if browser supports VT
document.startViewTransition(() => {
flushSync(() => {
setDisplayImage({ url, index });
setActiveImageIndex(index);
});
});
} else { //if VT is not supported, fall back to default behavior
setDisplayImage({ url, index });
setActiveImageIndex(index);
}
};
...
<Thumbnail onClick={handleClick({url, index})} />
政策台
Policybazaar 的投資產業運用 View Transition API,在說明「為什麼要購買」等提示元素時使用,使其在視覺上具有吸引力,並改善這類功能的使用情況。
整合 View 轉場功能後,我們不再使用重複的 CSS 和 JavaScript 程式碼來管理不同狀態下的動畫。這樣不僅減少開發工作,也大幅改善了使用者體驗。—Policybazaar 技術主管 Aman Soni
程式碼
下列程式碼與先前的範例類似。請注意,此功能可以覆寫 ::view-transition-old(root)
和 ::view-transition-new(root)
的預設樣式和動畫。在本例中,預設的 animation-duration
會更新為 0.4s。
togglePBAdvantagePopup(state: boolean) {
this.showPBAdvantagePopup = state;
if(!document.startViewTransition) {
changeState();
return;
}
document.startViewTransition(() => {changeState();});
function changeState() {
document.querySelector('.block_section').classList.toggle('hide');
document.querySelector('.righttoggle_box').classList.toggle('show');
}
}
.righttoggle_box{
view-transition-name: advantage-transition;
}
.block_section{
view-transition-name: advantage-transition;
}
::view-transition-old(root), ::view-transition-new(root) {
animation-duration: 0.4s;
}
使用 View Transition API 的注意事項
在同一頁面使用多個檢視畫面轉換效果時,請確保每個效果或區段具有不同的檢視畫面轉換名稱,以免發生衝突。
檢視畫面轉換進行中 (轉換) 時,系統會在 UI 的其餘部分新增圖層。因此,請避免在懸停時觸發轉換,因為 mouseLeave
事件將意外觸發 (當實際遊標尚未移動時)。
資源
- 使用 View Transition API 來順暢地進行轉換
- 說明:查看 MPA 轉場效果
- 個案研究:使用 View 轉場功能,打造流暢的瀏覽體驗
- 個案研究:網路能做些什麼?| 提供類似應用程式的導覽功能
- 互通性提案:允許不同瀏覽器的觀看轉場效果
- 您要回報錯誤或提出新功能建議嗎?我們想針對 SPA 和 MPA 提供您的寶貴意見。
探索本系列的其他文章,瞭解電子商務公司使用新的 CSS 和 UI 功能 (例如捲動導向動畫、彈出式視窗、容器查詢和 has()
選取器) 可帶來哪些好處。