Hiệu ứng chuyển đổi khung hiển thị là các lượt chuyển đổi dạng ảnh động và liền mạch giữa các trạng thái khác nhau trên giao diện người dùng của trang web hoặc ứng dụng. View Transitions API (API Chuyển đổi khung hiển thị) được thiết kế để cho phép bạn tạo các hiệu ứng này theo cách đơn giản và hiệu quả hơn so với trước đây. So với các phương pháp JavaScript trước đây, API này mang lại nhiều lợi ích như:
- Cải thiện trải nghiệm người dùng: Hiệu ứng chuyển đổi mượt mà và chỉ dẫn bằng hình ảnh sẽ hướng dẫn người dùng thực hiện các thay đổi trong giao diện người dùng, giúp quá trình điều hướng có cảm giác tự nhiên và bớt gây khó chịu.
- Tính liên tục về hình ảnh: Việc duy trì cảm giác liên tục giữa các khung hiển thị sẽ làm giảm tải nhận thức và giúp người dùng luôn định hướng trong ứng dụng.
- Hiệu suất: API cố gắng sử dụng ít tài nguyên luồng chính nhất có thể để tạo ảnh động mượt mà hơn.
- Tính thẩm mỹ hiện đại: Các hiệu ứng chuyển đổi được cải tiến góp phần mang đến trải nghiệm người dùng tinh tế và hấp dẫn.
Bài đăng này là một phần của loạt bài thảo luận về cách các công ty thương mại điện tử nâng cao trang web của họ bằng các tính năng CSS và giao diện người dùng mới. Trong bài viết này, hãy khám phá cách một số công ty đã triển khai và hưởng lợi từ View Transitions API (API Chuyển đổi khung hiển thị).
redBus
RedBus luôn cố gắng tạo ra nhiều trải nghiệm ngang hàng nhất có thể giữa trải nghiệm gốc và trải nghiệm web. Trước khi có View Transitions API (API Chuyển đổi khung hiển thị), việc triển khai các ảnh động này trên các thành phần web của chúng tôi gặp khó khăn. Tuy nhiên, với API này, chúng tôi thấy việc tạo các chuyển đổi trên nhiều hành trình của người dùng để mang lại trải nghiệm web giống với ứng dụng hơn là một ý tưởng trực quan. Tất cả những lợi ích này cùng với các lợi ích về hiệu suất khiến nó trở thành tính năng nhất định phải có cho mọi trang web. – Amit Kumar, Giám đốc kỹ thuật cấp cao của RedBus.
Nhóm đã triển khai quá trình chuyển đổi khung hiển thị ở nhiều nơi. Dưới đây là ví dụ về kết hợp hiệu ứng mờ dần và trượt trong ảnh động trên biểu tượng đăng nhập trên trang chủ.
Mã
Cách triển khai này sử dụng nhiềuview-transition-namevà ảnh động tuỳ chỉnh (scale-downvà scale-up). Việc sử dụng view-transition-name với một giá trị duy nhất sẽ tách thành phần đăng nhập khỏi phần còn lại của trang để tạo ảnh động riêng biệt. Việc tạo một view-transition-name riêng biệt mới cũng sẽ tạo một ::view-transition-group mới trong cây phần tử giả (như trong đoạn mã sau), cho phép thao tác này tách biệt với ::view-transition-group(root) mặc định.
::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
Nhóm đã sử dụng các hiệu ứng chuyển đổi khung hiển thị để thêm ảnh động mờ dần khi người dùng chuyển đổi giữa các hình thu nhỏ sản phẩm.
Việc triển khai rất dễ dàng. Bằng cách sử dụng
startViewTransition, chúng tôi ngay lập tức có được hiệu ứng chuyển đổi mờ dần dễ chịu hơn so với cách triển khai trước đó mà không có bất kỳ hiệu ứng nào – Andy Wihalim, Kỹ sư phần mềm cấp cao, Tokopedia.
Trước
Sau
Mã
Mã sau đây sử dụng một khung React và bao gồm mã dành riêng cho khung, chẳng hạn như flushSync.Đọc thêm về cách làm việc với các khung để triển khai các hiệu ứng chuyển đổi khung hiển thị.
Đây là cách triển khai cơ bản để kiểm tra xem trình duyệt có hỗ trợ startViewTransition hay không và nếu có thì quá trình chuyển đổi có thực hiện không. Nếu không, hoạt động này sẽ quay lại hành vi mặc định.
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
Ngành dọc đầu tư của Policybazaar đã sử dụng View Transitions API (API Chuyển đổi khung hiển thị) để hỗ trợ các yếu tố mẹo trợ giúp như "tại sao nên mua", giúp các yếu tố này trở nên bắt mắt và cải thiện mức sử dụng các tính năng như vậy.
Bằng cách kết hợp Chuyển đổi khung hiển thị, chúng tôi đã loại bỏ mã CSS và JavaScript lặp lại chịu trách nhiệm quản lý ảnh động trên nhiều trạng thái. Điều này giúp tiết kiệm công sức phát triển và cải thiện đáng kể trải nghiệm người dùng. – Aman Soni, Trưởng nhóm kỹ thuật, Policybazaar.
Mã
Mã sau đây tương tự như các ví dụ trước. Một điều cần lưu ý là khả năng ghi đè các kiểu cũng như ảnh động mặc định của ::view-transition-old(root) và ::view-transition-new(root). Trong trường hợp này, animation-duration mặc định được cập nhật thành 0,4 giây.
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;
}
Những điều cần xem xét khi sử dụng View Transitions API
Khi sử dụng nhiều hiệu ứng chuyển đổi khung hiển thị trên cùng một trang, hãy đảm bảo bạn có một tên chuyển đổi khung hiển thị khác cho từng hiệu ứng hoặc phần để ngăn xung đột.
Trong khi hiệu ứng chuyển đổi khung hiển thị đang hoạt động (chuyển đổi), hiệu ứng này sẽ thêm một lớp mới ở đầu phần còn lại của giao diện người dùng. Vì vậy, tránh kích hoạt hiệu ứng chuyển đổi khi di chuột, vì sự kiện mouseLeave sẽ được kích hoạt đột ngột (khi con trỏ thực tế vẫn chưa di chuyển).
Tài nguyên
- Chuyển đổi mượt mà và đơn giản với View Transitions API
- Giải thích: Xem các lượt chuyển đổi cho MPA
- Nghiên cứu điển hình: Khả năng di chuyển liền mạch nhờ tính năng chuyển đổi khung hiển thị
- Nghiên cứu điển hình: Web có thể làm gì!? | Cung cấp các thao tác điều hướng giống như trong ứng dụng
- Đề xuất tương tác: Cung cấp lượt chuyển đổi khung hiển thị trên các trình duyệt
- Bạn có muốn báo cáo lỗi hoặc yêu cầu tính năng mới không? Chúng tôi rất mong nhận được ý kiến đóng góp của bạn về SPA và MPA.
Khám phá các bài viết khác trong loạt bài này nói về cách các công ty thương mại điện tử được hưởng lợi từ việc sử dụng các tính năng CSS và giao diện người dùng mới, chẳng hạn như ảnh động cuộn, cửa sổ bật lên, truy vấn vùng chứa và bộ chọn has().