Hiệu ứng chuyển cảnh mang lại nhiều lợi ích cho người dùng, bao gồm cả việc giúp họ nắm được bối cảnh và giảm cảm nhận về độ trễ. Nhà phát triển muốn có khả năng tạo hiệu ứng 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ả một hiệu ứng đơn giản như hiệu ứng chuyển đổi cũng cần có cả hai trạng thái xuất hiện cùng một lúc. Điều này gây ra các thách thức về khả năng hữu dụng, chẳng hạn như xử lý hoạt động tương tác bổ sung trên phần tử gửi đ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, các phần tử có thể di chuyển xung quanh cây theo cách nhìn trực quan nhưng dễ dàng làm mất vị trí đọc và tiêu điểm.
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ó sự chồng chéo nào giữa các trạng thái, đồng thời 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 rằng việc triển khai có dễ dàng không? Có những 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 hiệu ứng chuyển đổi khung hiển thị trong 4 trang web khác nhau: 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) cũng như cách các trang web của họ hưởng lợi theo nhiều cách bằng cách sử dụng API Chuyển đổi khung hiển thị.
redBus
redBus, một thành viên của tập đoàn MakeMyTrip, là một trang web đặt vé và đặt vé xe buýt có trụ sở tại Bangalore, Ấn Độ và có mặt ở 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ị?
Nhóm redBus tin tưởng chắc chắn vào việc cung cấp trải nghiệm web hợp 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 ảnh động tuỳ chỉnh dựa trên JavaScript và CSS cho các hiệu ứng chuyển đổi trang ngay cả trước khi phát triển API Chuyển đổi thành phần hiển thị. Tuy nhiên, điều đó có nghĩa là họ phải xử lý việc quản lý hiệu suất trong các phân khúc mạng và thiết bị thấp hơn, đôi khi dẫn đến trải nghiệm khác biệt với 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ẻ tuỳ chỉnh của Chrome và trong phễu đặt vé xe buýt, nơi người dùng chuyển từ trang thông tin về khoảng không quảng cáo sang 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. Điều này là do trải nghiệm người dùng tốt hơn và hiệu suất được cảm nhận tốt 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.
Thông tin chi tiết về kỹ thuật 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 khung hiển thị cùng với các nỗ lực cải thiện INP trên trang web của họ, nhờ đó tăng doanh số bán hàng thêm 7%. Amit Kumar, Nhà quản lý kỹ thuật cấp cao tại redBus, cho biết hiệu ứng chuyển đổi khung hiển thị thực sự tuyệt vời đối với những người thực sự muốn cải thiện trải nghiệm người dùng và giảm chi phí bảo trì.
Chúng tôi đã tiến hành các buổi 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ừ nhiều nhóm người dùng. Nhờ sự hiểu biết sâu sắc về cơ sở người dùng (xe buýt và đường sắt) cũng như nhu cầu của họ, kết hợp với 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 công nghệ thông tin có trụ sở tại Nhật Bản, cung cấp nhiều dịch vụ trực tuyến, bao gồm cả việc xuất bản blog và tin tức.
Tại sao CyberAgent triển khai hiệu ứng chuyển đổi khung hiển thị?
Trước đây, CyberAgent đã cân nhắc sử dụng ảnh động CSS hoặc sử dụng một khung để triển khai hiệu ứng chuyển đổi ảnh động nhằm cải thiện trải nghiệm người dùng, nhưng họ lo ngại về hiệu suất kém trong việc kết xuất DOM và khả năng duy trì mã. 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 thách thức này.
CyberAgent đã triển khai các hiệu ứng chuyển đổi chế độ xem giữa danh sách blog và trang blog. Ở đây, hãy lưu ý cách họ thêm hiệu ứng chuyển đổi phần tử vào hình ảnh chính. Bạn có thể truy cập vào trang web của họ và trải nghiệm trực tiếp ngay hôm nay.
Họ cũng sử dụng truy vấn nội dung đa phương tiện để thiết kế nhiều trải nghiệm ảnh động cho nhiều thiết bị. Đối với các trang dành cho thiết bị di động, họ đã thêm hiệu ứng 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.
@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 các thành phần này sử dụng API Chuyển đổi thành phần hiển thị.
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ã mẫu Next.js.
Xem hiệu ứng chuyển đổi cho MPA bằng công nghệ kết xuất trước
CyberAgent cũng đã thử nghiệm API Chuyển đổi khung hiển thị cho Ứng dụng nhiều trang (MPA) mới của chúng tôi (hiện đang ở 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 vị trí: 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 nhấp vào nút. Việc điều chỉnh nhỏ về thiết kế ảnh động này khiến trang MPA trông giống như một SPA hơn từ quan điểm của người dùng, chỉ có nội dung mới tạo ảnh động:
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 nhau 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 view-transition-name 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 CyberAgent sử dụng API chuyển đổi chế độ xem 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 của họ 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 trong CyberAgent, cho biết các hiệu ứng chuyển đổi khung hình có thể tác động đáng kể đến hoạt động kinh doanh vì hai lý do.
Thứ nhất, chúng 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, các hiệu ứng này còn làm nổi bật và nhấn mạnh thương hiệu bằng ảnh động. CyberAgent có thiết kế ảnh động được chỉ định để truyền tải thương hiệu của họ. Với các hiệu ứng chuyển đổi khung hiển thị, họ có thể triển khai trải nghiệm mang thương hiệu này mà không phải trả thêm chi phí duy trì thư viện bên ngoài.
Chuyển đổi thành phần hiển thị là một trong những API yêu thích của tôi. 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, CTO của Ameba
Tiếng Nykaa
Nykaa là nền tảng thương mại điện tử lớn nhất về thời trang và làm đẹp ở Ấn Độ. 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 đang sử dụng nhiều hiệu ứng chuyển đổi khung hiển thị để chuyển từ trang chi tiết sản phẩm sang trang thông tin sản phẩm.
Thông tin chi tiết về kỹ thuật triển khai
Nykaa đã sử 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 tính năng Chuyển đổi khung hiển thị với 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 bộ phận ứng dụng tại Nykaa, cho biết lợi ích lớn nhất của quá trình chuyển đổi chế độ xem là "Nhận thức về tốc độ". Nykaa đã sử dụng hiệu ứng lấp lánh để chờ nội dung tải từ phần phụ trợ, nhưng nhận thấy việc hiển thị hiệu ứng lấp lánh không cho người dùng biết họ cần phải đợi bao lâu để nội dung tải. Với các hiệu ứng chuyển đổi khung hiển thị, chính hiệu ứng chuyển đổi này đã mang đến cho người dùng cảm giác "sắp có điều gì đó xảy ra", giúp họ bớt khó chịu khi chờ đợi.
Nykaa rất hào hứng với trải nghiệm người dùng mới được nâng cao của trang web nhờ tính năng chuyển đổi chế độ xem, đồng thời sẵn sàng triển khai tính năng chuyển đổi chế độ xem trên các trang bổ sung. Sau đây là những gì Phó chủ tịch phụ trách thiết kế của họ nói:
Chúng tôi cam kết sẽ triển khai hiệu ứng chuyển đổi thành phần hiển thị trong tất cả các tính năng sắp ra mắt nếu phù hợp. Một số lĩnh vực đã được xác định và nhóm đang tích cực đầu tư vào những lĩnh vực đó.
Krishna R V, Phó chủ tịch phụ trách thiết kế
PolicyBazaar
Có trụ sở tại Gurgaon, PolicyBazaar là công ty công nghệ tài chính đa quốc gia và là công ty tổng hợp bảo hiểm lớn nhất Ấn Độ.
Tại sao PolicyBazaar triển khai hiệu ứng chuyển đổi khung hiển thị?
Là 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. Trước khi View Transitions API ra mắt, việc triển khai hiệu ứng chuyển đổi tuỳ chỉnh bằng JavaScript và CSS là một phương pháp phổ biến, vì các hiệu ứng này giúp nâng cao trải nghiệm người dùng, tạo ra luồng điều hướng liền mạch và cải thiện sức hấp dẫn tổng thể về hình ảnh của trang web.
Tuy nhiên, những phương thức triển khai tuỳ chỉnh này có thể gây ra độ trễ dựa trên hiệu suất, độ phức tạp trong việc bảo trì mã và khả năng tương thích không tối ưu với các khung được sử dụng. API Chuyển đổi thành phần hiển thị đã 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 với các lợi ích về hiệu suất có sẵn.
PolicyBazaar đã sử dụng hiệu ứng chuyển đổi khung hiển thị trên nhiều thành phần trong hành trình trước khi báo giá để tạo hứng thú cho người mua tiềm năng cung cấp thông tin chi tiết bắt buộc để mua chính sách bảo hiểm.
Thông tin chi tiết về kỹ thuật triển khai
Họ sử dụng phương pháp khung kết hợp với Angular và React chiếm ưu thế trong hầu hết cơ sở mã của họ. Dưới đây là đoạn trích về VT trong mã được viết bằng Angular và do Aman Soni (Nhà phát triển giao diện người dùng chính của PolicyBazaar) chia sẻ:
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ể. Điều này giúp mang lại trải nghiệm điều hướng mượt mà, tương tác có hướng dẫn, giảm tải nhận thức, thẩm mỹ hiện đại và nhiều lợi ích khác.
Việc nâng cao trải nghiệm web là mục tiêu quan trọng hàng đầu của PB và VT đã được chứng minh là một công cụ hữu ích để đạt được mục tiêu này một cách liền mạch đáng kể. 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 công nghệ, PolicyBazaar)
Các bước tiếp theo
Bạn có muốn dùng thử hiệu ứng chuyển đổi khung hiển thị không? Sau đây là một số tài nguyên mà bạn có thể tham khảo để tìm hiểu thêm: