Quá trình chuyển đổi mang lại nhiều lợi ích cho người dùng, bao gồm việc giúp giữ cho quá trình chuyển đổi theo đúng ngữ cảnh và giảm nhận thức về độ trễ. Các nhà phát triển muốn tạo ra sự chuyển đổi liền mạch giữa các trang, giúp tăng mức độ tương tác của người dùng với trang web của họ.
Tuy nhiên, việc bật chuyển đổi trạng thái thực sự khó vì nhà phát triển phải quản lý trạng thái của hai thành phần khác nhau. Ngay cả những hoạt động như mờ dần cũng bao gồm cả hai trạng thái xuất hiện cùng lúc. Điều đó đặt ra những thách thức về khả năng hữu dụng, chẳng hạn như phải xử lý tương tác bổ sung trên phần tử đi. Đối với người dùng thiết bị hỗ trợ, có một khoảng thời gian mà cả trạng thái trước và sau đều nằm trong DOM cùng một lúc. Ngoài ra, mọi thứ có thể di chuyển xung quanh cây theo cách dễ nhìn, nhưng có thể dễ dàng làm mất vị trí và tiêu điểm đọc.
Ra mắt trong Chrome 111, API Chuyển đổi khung hiển thị cho phép tạo các hiệu ứng chuyển đổi mượt mà và đơn giản giữa các trang. Tính năng này cho phép bạn thay đổi DOM mà không có bất kỳ sự chồng chéo nào giữa các trạng thái và có ảnh động chuyển đổi giữa các trạng thái bằng cách sử dụng chế độ xem chụp nhanh.
Bạn có thể thắc mắc về việc triển khai tính năng này dễ dàng đến mức nào? Có những loại trường hợp sử dụng nào? Các nhà phát triển khác đang sử dụng hiệu ứng chuyển đổi khung hiển thị như thế nào?
Bài viết này sẽ hướng dẫn bạn cách triển khai việc chuyển đổi chế độ xem trong 4 trang web: RedBus (du lịch), CyberAgent (nhà xuất bản tin tức/blog), Nykaa (Thương mại điện tử) và PolicyBazaar (bảo hiểm) và lợi ích mà các trang web của họ mang lại theo nhiều cách khi sử dụng View Transitions API.
redBus
redBus, một thành viên của nhóm MakeMyTrip, là một trang web đặt vé và bán vé xe buýt có trụ sở tại Bangalore, Ấn Độ và hoạt động ở nhiều khu vực địa lý trên toàn cầu. Đây là một trong những trang web đầu tiên triển khai trải nghiệm bằng View Transitions API.
Tại sao Redbus triển khai hiệu ứng chuyển đổi khung hiển thị?
Đội ngũ redBus tin tưởng vững chắc vào việc cung cấp trải nghiệm web thống nhất, giống như ứng dụng, gần giống với ứng dụng gốc của họ nhất có thể. Trên thực tế, họ đã triển khai nhiều giải pháp tuỳ chỉnh trong những năm qua. Ví dụ: họ triển khai các ảnh động dựa trên JavaScript và CSS tuỳ chỉnh cho quá trình chuyển đổi trang ngay cả trước khi View Transitions API được phát triển. Tuy nhiên, điều đó đồng nghĩa với việc họ phải xử lý hoạt động quản lý hiệu suất ở các phân khúc mạng và thiết bị thấp hơn, dẫn đến trải nghiệm khác biệt khi áp dụng chiến lược tải thích ứng.
redBus sử dụng hiệu ứng chuyển đổi khung hiển thị cho nhiều hành trình của người dùng. Ví dụ: trong phần tự trợ giúp trong ứng dụng di động, họ mở các trang web trong Thẻ Chrome tuỳ chỉnh và trong phễu đặt vé xe buýt, nơi người dùng chuyển từ trang thông tin kho hàng đến trang thanh toán. Trong trường hợp sau, các chuyển đổi xem giúp điều hướng từ trang sang trang mượt mà hơn và dẫn đến tăng tỷ lệ chuyển đổi. Đây là kết quả của việc mang lại trải nghiệm tốt hơn cho người dùng và nhận thấy hiệu suất rõ ràng hơn, trong khi các thao tác nặng (chẳng hạn như tìm nạp khoảng không quảng cáo mới nhất hiện có) được thực thi.
Chi tiết kỹ thuật khi triển khai
redBus sử dụng React và EJS làm nhóm công nghệ giao diện người dùng, với sự kết hợp của các SPA và MPA trên các hành trình khác nhau. Phần trích dẫn mã sau đây minh hoạ cách sử dụng các hiệu ứng chuyển đổi khung hiển thị:
/* 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();
}
};
Trong CSS sau, slide-to-right, slide-to-left, slide-from-right và slide-from-left là các khung hình chính của ảnh động 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;
}
Tác động đối với công việc kinh doanh
redBus chọn triển khai hiệu ứng chuyển đổi chế độ xem cùng với nỗ lực cải thiện INP trên trang web của mình, giúp doanh số bán hàng tăng thêm 7%. Amit Kumar, Nhà quản lý kỹ thuật cấp cao tại redBus, cho biết việc chuyển đổi khung hiển thị thực sự tuyệt vời đối với những ai thực sự muốn có trải nghiệm người dùng tốt hơn và muốn giảm chi phí bảo trì.
Chúng tôi đã tiến hành các phiên phản hồi toàn diện của người dùng, kết hợp thông tin chi tiết có giá trị từ một nhóm người dùng đa dạng. Nhờ hiểu biết sâu sắc về cơ sở người dùng (xe buýt và tàu hoả) cũng như nhu cầu của họ, kết hợp với kiến thức chuyên môn của mình, chúng tôi tin rằng tính năng này sẽ mang lại giá trị đáng kể ngay từ đầu mà không cần thử nghiệm A/B. Hiệu ứng chuyển đổi khung hiển thị là một bước tiến nhằm thu hẹp khoảng cách giữa ứng dụng và web bằng trải nghiệm điều hướng mượt mà.
Anoop Menon, Giám đốc công nghệ redBus
CyberAgent
CyberAgent là một công ty CNTT có trụ sở tại Nhật Bản, cung cấp nhiều dịch vụ trực tuyến, bao gồm blog và xuất bản tin tức.
Tại sao CyberAgent triển khai hiệu ứng chuyển đổi khung hiển thị?
Trước đây, CyberAgent từng cân nhắc việc sử dụng ảnh động CSS hoặc khung để triển khai hiệu ứng chuyển đổi dạng ảnh động nhằm cải thiện trải nghiệm người dùng. Tuy nhiên, họ lo ngại rằng việc hiển thị DOM và khả năng duy trì mã sẽ kém hiệu quả. Khi Chrome hỗ trợ thêm API chuyển đổi khung hiển thị, họ rất hào hứng sử dụng API này để tạo ra những hiệu ứng chuyển đổi trang hấp dẫn vượt qua được những khó khăn này.
CyberAgent đã triển khai hiệu ứng chuyển đổi khung hiển thị giữa danh sách blog và trang blog. Tại đây, hãy xem cách họ thêm hiệu ứng chuyển đổi của phần tử vào hình ảnh chính. Bạn có thể truy cập trang web của họ và trải nghiệm phiên bản này trực tiếp ngay hôm nay.
Họ cũng sử dụng các truy vấn phương tiện để thiết kế trải nghiệm ảnh động khác nhau cho các thiết bị khác nhau. Đối với các trang dành cho thiết bị di động, chúng đã bao gồm chuyển đổi phần tử, nhưng hiệu ứng này đã có quá nhiều chuyển động đối với máy tính để bàn.
@media screen and (min-width: 769px) {
.main-visual {
view-transition-name: none !important;
}
}
Chi tiết kỹ thuật khi triển khai
CyberAgent sử dụng Next.js để xây dựng SPA. Ví dụ về mã sau đây minh hoạ cách sử dụng 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]);
};
Xem thêm một số mã Next.js mẫu.
Xem hiệu ứng chuyển đổi MPA bằng công nghệ kết xuất trước
CyberAgent cũng dùng thử View Transitions API (API Chuyển đổi khung hiển thị dành cho các ứng dụng nhiều trang) (hiện có cờ chrome://flags/#view-transition-on-navigation) trên một dịch vụ có tên Ameba News (một trang web cổng tin tức).
Hiệu ứng chuyển đổi chế độ xem được sử dụng ở hai nơi: Thứ nhất là khi thay đổi danh mục tin tức, như trong video sau.
Phần thứ hai là giữa trang tin tức nổi bật, nơi trích dẫn nội dung được hiển thị và khi người dùng nhấp để Xem thêm chi tiết, phần còn lại của bài viết sẽ được làm mờ.
Điểm thú vị là họ chỉ thêm ảnh động vào phần sẽ thay đổi sau khi người dùng nhấp vào nút này. Điều chỉnh nhỏ này trong thiết kế ảnh động làm cho trang MPA trông giống như một SPA từ góc nhìn của người dùng, chỉ có nội dung mới là hoạt ảnh trong:
Dưới đây là cách họ thực hiện việc này: họ chỉ định một view-transition-name khác cho các phần khác nhau của trang. Ví dụ: họ đã chỉ định một view-transition-name cho phần trên cùng của bài viết, một phần khác cho phần dưới cùng và không thêm ảnh động vào phần trên cùng.
::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;
}
Một điều thú vị khác về việc sử dụng API chuyển đổi khung hiển thị của CyberAgent là họ sử dụng đường liên kết nhanh để dễ dàng triển khai các quy tắc kết xuất trước trên trang chi tiết. Dưới đây là mã mẫu của họ:
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}/`);
});
Bạn có thể đọc thêm về cách triển khai đường liên kết nhanh trong bài viết này.
Lời chứng thực
Kazunari Hara, Trưởng nhóm kỹ thuật của dịch vụ Ameba tại CyberAgent, nói rằng việc chuyển đổi góc nhìn có thể tác động đáng kể đến doanh nghiệp vì hai lý do.
Đầu tiên, các thẻ này hướng dẫn người dùng trên trang. Hiệu ứng chuyển đổi khung hiển thị giúp người dùng tập trung vào thông điệp quan trọng nhất một cách trực quan và khai thác tối đa trang web. Ngoài ra, chúng còn giúp nâng cao và nhấn mạnh thương hiệu bằng ảnh động. CyberAgent cung cấp dịch vụ thiết kế ảnh động theo chỉ định để truyền đạt thông tin về thương hiệu của họ. Với chuyển đổi khung hiển thị, họ có thể triển khai trải nghiệm có thương hiệu này mà không mất thêm chi phí duy trì thư viện bên ngoài.
Chuyển đổi khung hiển thị là một trong những API tôi yêu thích. Khả năng thêm ảnh động dưới dạng tính năng trình duyệt chuẩn giúp chuyển đổi khung hiển thị dễ triển khai và duy trì hơn so với các giải pháp khác phụ thuộc vào thư viện. Chúng tôi mong muốn triển khai chuyển đổi chế độ xem cho nhiều dịch vụ hơn để truyền đạt thương hiệu của chúng tôi.
Kazunari Hara, Giám đốc công nghệ của Ameba
Nykaa
Nykaa là nền tảng thương mại điện tử lớn nhất của Ấn Độ về thời trang và làm đẹp. Họ mong muốn mang đến cho người dùng trải nghiệm trên web dành cho thiết bị di động giống nhất có thể với trải nghiệm trong ứng dụng gốc. Trước đây, khi cố gắng triển khai ảnh động chuyển đổi, họ gặp khó khăn khi viết JavaScript tuỳ chỉnh phức tạp. Điều này cũng ảnh hưởng nhẹ đến hiệu suất của trang web.
Tại sao Nykaa triển khai hiệu ứng chuyển đổi khung hiển thị?
Khi có sự xuất hiện của các hiệu ứng chuyển đổi chế độ xem, nhóm của Nykaa đã nhận ra cơ hội khi các hiệu ứng chuyển đổi này sẵn có sẵn, đồng nghĩa với việc trải nghiệm người dùng của các lượt chuyển đổi trang có thể được cải thiện đáng kể mà không làm tăng hiệu suất. Nykaa chủ yếu sử dụng hiệu ứng chuyển đổi chế độ xem để chuyển từ trang chi tiết sản phẩm sang trang thông tin sản phẩm.
Chi tiết kỹ thuật khi triển khai
Nykaa đã dùng React và Emotion để xây dựng SPA. Bạn có thể xem thêm mã mẫu về cách sử dụng hiệu ứng chuyển đổi khung hiển thị bằng React tại đây.
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 cho ảnh động ngăn bên:
::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};
}
Lời chứng thực
Sunit Jindal, trưởng nhóm ứng dụng tại Nykaa, cho biết lợi ích lớn nhất của việc chuyển đổi khung hiển thị là "Cảm nhận về tốc độ". Nykaa đã sử dụng hiệu ứng ánh sáng lung linh để chờ nội dung tải từ phần phụ trợ, nhưng nhận thấy rằng việc hiển thị hiệu ứng ánh sáng lung linh không cung cấp cho người dùng thời gian họ cần đợi nội dung tải. Khi chuyển đổi khung hiển thị, chính phần chuyển đổi này đã giúp người dùng có cảm giác rằng "điều gì đó sắp xảy ra", nhờ vậy mà việc chờ đợi bớt khó khăn hơn.
Nykaa rất háo hức với trải nghiệm người dùng mới được cải tiến cho trang web của họ với các hiệu ứng chuyển đổi chế độ xem và cũng đã sẵn sàng triển khai các hiệu ứng chuyển đổi chế độ xem trên các trang khác. Sau đây là ý kiến của Phó chủ tịch mảng thiết kế:
Chúng tôi cam kết sẽ sớm triển khai các hiệu ứng chuyển đổi khung hiển thị trong tất cả các tính năng sắp ra mắt khi phù hợp. Hiện nhóm của chúng tôi đã xác định được một số khía cạnh và đang tích cực đầu tư vào những khía cạnh đó.
Krishna R V, Phó chủ tịch bộ phận Thiết kế
PolicyBazaar
PolicyBazaar là công ty tổng hợp bảo hiểm và công ty công nghệ tài chính đa quốc gia có trụ sở chính tại Gurgaon.
Tại sao PolicyBazaar triển khai chuyển đổi chế độ xem?
Là một công ty ưu tiên nền tảng web, nhóm PolicyBazaar luôn hướng đến việc cung cấp trải nghiệm tốt nhất có thể cho người dùng trên các hành trình trọng yếu của người dùng. Thường thì họ cần triển khai hiệu ứng chuyển đổi tuỳ chỉnh bằng JavaScript và CSS ngay cả trước khi ra mắt View Transitions API, vì các API này giúp nâng cao trải nghiệm người dùng, tạo luồng điều hướng liền mạch và cải thiện giao diện tổng thể của trang web.
Tuy nhiên, các phương pháp triển khai tuỳ chỉnh này phải đánh đổi bằng sự chậm trễ do hiệu suất đôi khi, phức tạp trong việc bảo trì mã và khả năng tương thích dưới mức tối ưu với các khung được sử dụng. View Transitions API đã giúp họ vượt qua hầu hết những thách thức này bằng cách cung cấp một giao diện dễ sử dụng cùng các lợi ích về hiệu suất có sẵn.
PolicyBazaar đã sử dụng các hiệu ứng chuyển đổi chế độ xem trên nhiều thành phần trong hành trình báo giá trước để khiến người mua tiềm năng hào hứng cung cấp thông tin cần thiết để mua hợp đồng bảo hiểm.
Chi tiết kỹ thuật khi triển khai
Họ sử dụng phương pháp tiếp cận khung kết hợp, trong đó Angular và React chiếm ưu thế trong phần lớn cơ sở mã của họ. Đây là phần trích dẫn VT từ mã của họ được viết bằng Angular và được chia sẻ bởi Aman Soni (Nhà phát triển giao diện người dùng chính củaPolicyBazaar):
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');
}
Lời chứng thực
Rishabh Mehrotra, Trưởng bộ phận Thiết kế (Life BU) cho biết rằng việc chuyển đổi khung hiển thị đóng vai trò quan trọng trong việc nâng cao trải nghiệm trên trang web cho người dùng bằng cách cải thiện khả năng hữu dụng, mức độ tương tác và mức độ hài lòng tổng thể. AI đã giúp người dùng điều hướng suôn sẻ, tương tác có hướng dẫn, giảm tải nhận thức, mang lại tính thẩm mỹ hiện đại và nhiều lợi ích khác.
Việc nâng cao trải nghiệm trên web là một mục tiêu quan trọng đối với PB và VT đã được chứng minh là một công cụ quan trọng để đạt được điều này với tính liền mạch vượt trội. Nhờ sức hút rộng rãi trong cộng đồng nhà phát triển và cơ sở người dùng của trò chơi này, chúng tôi đã thôi thúc chúng tôi rất nhiều nhiệt huyết. Trong quá trình tích hợp tính năng này trên nhiều POD, chúng tôi dự đoán rằng giải pháp này sẽ tác động sâu rộng đến mức độ hài lòng và hiệu quả vận hành xuất sắc.
Saurabh Tiwari (Giám đốc kỹ thuật, PolicyBazaar)
Các bước tiếp theo
Bạn có muốn dùng thử các hiệu ứng chuyển đổi khung hiển thị không? Dưới đây là một số tài nguyên mà bạn có thể theo dõi để tìm hiểu thêm: