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 bắt được bối cảnh và giảm cảm giác 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 các hiệu ứng chuyển đổi trạng thái thực sự khó khăn vì nhà phát triển phải quản lý trạng thái của 2 phần tử khác nhau. Ngay cả một hiệu ứng chuyển cảnh đơn giản cũng cần có cả hai trạng thái cùng lúc. Điều này gây ra các thách thức về khả năng sử dụng, chẳng hạn như xử lý hoạt động 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, các thành phần có thể di chuyển xung quanh cây theo cách phù hợp về mặt hình ảnh, nhưng có thể dễ dàng khiến vị trí đọc và tiêu điểm bị mất.
Ra mắt trong Chrome 111, View Transitions API (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ự trùng lặp 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 các khung hiển thị được chụp nhanh.
Có thể bạn sẽ 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 chế độ xem trên 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 này hưởng lợi theo nhiều cách khác nhau khi sử dụng View Transitions API.
redBus
redBus, một thành viên của tập đoàn MakeMyTrip, là một trang web đặt 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 chế độ xem?
Nhóm tại 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 và gần giống nhất có thể với các ứng dụng gốc của họ. 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 dựa trên JavaScript và CSS tuỳ chỉnh cho hiệu ứng chuyển đổi trang ngay cả trước khi View Transitions API được phát triển. Tuy nhiên, điều đó có nghĩa là họ phải đối phó với việc quản lý hiệu suất ở các phân khúc thấp hơn của mạng và thiết bị, đô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 của họ (mở các trang web trong Thẻ Chrome tuỳ chỉnh) và trong quy trình đặt vé xe buýt (nơi người dùng chuyển từ trang liệt kê kho hàng sang trang thanh toán). Trong trường hợp thứ hai, các hiệu ứng chuyển đổi chế độ xem giúp hoạt động điều hướng giữa các trang diễn ra mượt mà hơn và dẫn đến việc tăng tỷ lệ chuyển đổi. Đây là kết quả của trải nghiệm người dùng tốt hơn và hiệu suất 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 hàng mới nhất hiện có) được thực hiện.
Thông tin chi tiết về kỹ thuật triển khai
redBus sử dụng React và EJS làm ngăn xếp công nghệ giao diện người dùng, kết hợp SPA và MPA trong nhiều hành trình. Đoạn mã sau đây cho thấy cách sử dụng 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 đây, 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 họ, dẫn đến doanh số bán hàng tăng thêm 7%. Amit Kumar, Quản lý cấp cao về kỹ thuật 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ó trải nghiệm người dùng tốt hơn và mong muốn giảm bớt chi phí bảo trì.
Chúng tôi đã tiến hành các phiên thu thập ý kiến phản hồi toàn diện của người dùng, kết hợp những thông tin chi tiết có giá trị từ một nhóm người dùng đa dạng. Nhờ hiểu rõ cơ sở người dùng (xe buýt và tàu hoả) và 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. Ảnh động chuyển đổi chế độ xem là một bước tiến giúp thu hẹp khoảng cách giữa ứng dụng và web, mang đến trải nghiệm điều hướng mượt mà.
Anoop Menon, Giám đốc công nghệ (CTO) của 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 cả dịch vụ xuất bản blog và tin tức.
Tại sao CyberAgent triển khai hiệu ứng chuyển đổi chế độ xem?
Trước đây, CyberAgent từng 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 độ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 khi kết xuất DOM và khả năng duy trì mã. Khi Chrome thêm tính năng hỗ trợ View Transitions API, họ rất hào hứng sử dụng API này để tạo các hiệu ứng chuyển trang hấp dẫn, khắc phục những thách thức này.
CyberAgent đã triển khai 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 các truy vấn phương tiện để thiết kế nhiều trải nghiệm hoạt ảnh 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;
}
}
Thông tin chi tiết về kỹ thuật triển khai
CyberAgent sử dụng Next.js để tạo SPA của họ. Ví dụ về mã sau đây minh hoạ cách các trang này 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ã mẫu Next.js.
Hiệu ứng chuyển đổi khung hiển thị cho MPA bằng công nghệ kết xuất trước
CyberAgent cũng đã thử nghiệm View Transitions API cho Ứng dụng nhiều trang (MPA) (hiện đang ở dưới cờ chrome://flags/#view-transition-on-navigation) trên một dịch vụ có tên là Ameba News, đây là một trang web cổng thông tin tin tức.
Hiệu ứng chuyển đổi chế độ xem được dùng ở 2 vị trí: Vị trí đầu tiên là khi thay đổi danh mục tin tức, như trong video sau.
Trường hợp thứ hai là giữa trang tin nổi bật (nơi một đoạn trích nội dung được hiển thị) và khi người dùng nhấp vào Xem thêm chi tiết, phần còn lại của bài viết sẽ xuất hiện mờ dần.
Đ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. Thay đổi nhỏ này trong thiết kế ảnh động giúp trang MPA trông giống SPA hơn theo quan điểm của người dùng, chỉ có nội dung mới được tạo hiệu ứng động:
Cách họ thực hiện việc này là 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ủa bài viết, một view-transition-name khác cho phần dưới và không thêm hiệu ứng động nào vào phần trên.
::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ểm thú vị khác về việc CyberAgent sử dụng View Transitions API là họ đã dùng quicklink để 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 tại CyberAgent, cho biết rằng hiệu ứng chuyển đổi khung hiển thị có thể tác động đáng kể đến hoạt động kinh doanh vì 2 lý do.
Thứ nhất, chúng hướng dẫn người dùng trên trang. Hiệu ứng chuyển đổi chế độ xem giúp người dùng tập trung vào thông điệp quan trọng nhất và giúp họ khai thác tối đa trang web. Ngoài ra, các thành phần này còn giúp nâng cao và nhấn mạnh thương hiệu bằng ảnh động. CyberAgent có một thiết kế hoạt hoạ riêng để truyền tải thương hiệu của họ. Với hiệu ứng chuyển đổi chế độ xem, họ có thể triển khai trải nghiệm mang thương hiệu này mà không phải tốn chi phí duy trì các thư viện bên ngoài.
View Transitions là một trong những API mà tôi yêu thích. Khả năng thêm ảnh động dưới dạng một tính năng tiêu chuẩn của trình duyệt giúp bạn dễ dàng triển khai và duy trì hiệu ứng chuyển đổi chế độ xem 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 hiệu ứng chuyển đổi chế độ xem cho nhiều dịch vụ hơn để truyền tải thương hiệu của mình.
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 về thời trang và làm đẹp tại Ấn Độ. Họ muốn trải nghiệm web di động của mình gần giống nhất có thể với trải nghiệm ứng dụng gốc. Khi cố gắng triển khai các ảnh động chuyển đổi trước đây, họ đã gặp khó khăn khi viết mã JavaScript tuỳ chỉnh phức tạp. Điều này cũng ảnh hưởng không đáng kể đến hiệu suất của trang web.
Tại sao Nykaa triển khai hiệu ứng chuyển đổi chế độ xem?
Khi hiệu ứng chuyển đổi chế độ xem ra mắt, nhóm của Nykaa nhận thấy rằng việc các hiệu ứng chuyển đổi này có sẵn một cách tự nhiên có nghĩa là trải nghiệm người dùng của hiệu ứng chuyển đổi trang có thể được cải thiện đáng kể mà không ảnh hưởng đến hiệu suất. Nykaa đang sử dụng hiệu ứng chuyển đổi chế độ xem rất nhiều để chuyển đổi từ trang chi tiết sản phẩm sang trang danh sách 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 của họ. Bạn có thể xem thêm mã mẫu về cách sử dụng hiệu ứng chuyển đổi chế độ xem 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 của ngăn kéo 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, người đứng đầu mảng ứng dụng tại Nykaa, cho biết lợi ích lớn nhất của hiệu ứng chuyển đổi khung hiển thị là "Cảm nhận 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 rằng việc hiển thị hiệu ứng lấp lánh không cho người dùng biết họ sẽ cần đợi bao lâu để nội dung tải. Với hiệu ứng chuyển đổi chế độ xem, bản thân hiệu ứng chuyển đổi đã mang đến cho người dùng cảm giác "sắp có điều gì đó xảy ra", nhờ đó giúp họ bớt khó chịu khi chờ đợi.
Nykaa rất hài lòng với trải nghiệm người dùng mới được cải thiện của trang web nhờ hiệu ứng chuyển đổi chế độ xem và sẵn sàng triển khai hiệu ứng chuyển đổi chế độ xem trên các trang khác. Đâ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 khung hiển thị trong tất cả các tính năng sắp ra mắt khi cần thiết. Chúng tôi đã xác định được một số lĩnh vực và đ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 chế độ xem?
Là một công ty ưu tiên web, nhóm PolicyBazaar luôn hướng đến việc mang lại trải nghiệm tốt nhất có thể cho người dùng trong suốt hành trình quan trọng của họ. 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ì những hiệu ứng này giúp nâng cao trải nghiệm người dùng, tạo ra một quy trình điều hướng liền mạch và cải thiện sức hấp dẫn tổng thể về mặt thị giác cho trang web của họ.
Tuy nhiên, những cách triển khai tuỳ chỉnh này phải trả giá bằng việc đôi khi hiệu suất bị chậm trễ, độ phức tạp khi bảo trì mã và khả năng tương thích dưới mức tối ưu với các khung hình được sử dụng. View Transitions API đã giúp họ khắc phục 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 một cách tự nhiên.
PolicyBazaar đã sử dụng hiệu ứng chuyển đổi khung hiển thị trên nhiều phần tử trong hành trình trước khi báo giá để thu hút người mua tiềm năng cung cấp thông tin cần thiết cho việ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 phần lớn cơ sở mã của họ. Sau đây là đoạn trích về VT trong mã của họ được viết bằng Angular và do Aman Soni (Trưởng nhóm nhà phát triển giao diện người dùng 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 nhóm Thiết kế (Life BU) cho biết hiệu ứng chuyển đổi chế độ xem đóng vai trò quan trọng trong việc nâng cao trải nghiệm của người dùng trên trang web bằng cách cải thiện khả năng sử 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 đến 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, giao diện hiện đại và nhiều lợi ích khác.
Nâng cao trải nghiệm trên web là mục tiêu tối quan trọng của PB và VT đã 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ể. Sự hấp dẫn rộng rãi của công cụ này đối với cả cộng đồng nhà phát triển và cơ sở người dùng đã truyền cho nhóm của chúng tôi một tinh thần nhiệt huyết. Khi cân nhắc việc tích hợp công cụ này trên nhiều POD, chúng tôi dự đoán công cụ này sẽ có tác động tích cực trên diện rộng đến mức độ hài lòng và hiệu quả hoạt động.
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 chế độ xem không? Sau đây là một số tài nguyên bạn có thể tham khảo để tìm hiểu thêm: