Hiệu ứng chuyển đổi khung hiển thị là sự chuyển đổi dạng ảnh động và liền mạch giữa các trạng thái của một trang web hoặc giao diện người dùng của ứng dụng. Chiến lược phát hành đĩa đơn Xem API chuyển đổi đã đượ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 là có thể trước đây. API mang lại nhiều lợi ích so với trước đó Các phương pháp tiếp cận JavaScript bao gồm:
- 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ông qua các thay đổi trong giao diện người dùng, giúp việc điều hướng trở nên tự nhiên và ít gây khó chịu hơn.
- Tính liên tục về hình ảnh: Duy trì tính liên tục giữa các lượt xem giúp giảm tải cho khả năng nhận thức và giúp người dùng luôn dễ dàng định hướng trong ứng dụng.
- Hiệu suất: API cố gắng sử dụng một vài tài nguyên luồng chính như giúp tạo ra hoạt ảnh mượt mà hơn.
- Thẩm mỹ hiện đại: Hiệu ứng chuyển cảnh được cải tiến góp phần tạo nên hình ảnh trải nghiệm người dùng hấp dẫn.
Bài đăng này nằm trong loạt nội dung 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ách sử dụng các tính năng mới về CSS và giao diện người dùng. 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 Transition API.
redBus
redBus luôn cố gắng tạo ra sự đồng nhất giữa bản gốc và web trải nghiệm tốt nhất có thể. Trước API Chuyển đổi khung hiển thị, việc triển khai ảnh động trên tài sản web của chúng tôi là việc không hề dễ dàng. Nhưng nhờ API, chúng tôi đã tìm ra trực quan để tạo sự chuyển đổi qua nhiều hành trình của người dùng nhằm giúp hệ thống trải nghiệm giống ứng dụng hơn. Tất cả những điều này cùng với các lợi ích về hiệu suất khiến ứng dụng phải có tính năng cho mọi trang web.—Hãy bắt đầu Kumar, Kỹ thuật cấp cao Người quản lý, redBus.
Nhóm này đã triển khai việc chuyển đổi khung hiển thị ở nhiều nơi. Sau đây là ví dụ sự kết hợp giữa hiệu ứng rõ dần và trượt vào ảnh động trên biểu tượng đăng nhập ở trang chủ .
Mã
Cách triển khai này sử dụng nhiềuview-transition-name
và ảnh động tuỳ chỉnh
(scale-down
và scale-up
). Sử dụng view-transition-name
với một giá trị duy nhất
tách thành phần đăng nhập khỏi phần còn lại của trang để tạo hiệu ứng cho thành phần đó
riêng biệt. Khi tạo một view-transition-name
mới độc đáo, bạn cũng sẽ tạo một
::view-transition-group
trong cây phần tử giả (minh hoạ trong ví dụ sau
mã), cho phép thao tác độc lập với mã mặc định
::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
Nhóm này đã sử dụng hiệu ứng chuyển đổi khung hiển thị để thêm một ảnh động mờ dần khi người dùng chuyển đổi giữa các hình thu nhỏ của 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ỳ tác dụng nào—Andy Wihalim, Phần mềm cấp cao Kỹ sư, Tokopedia.
Trước
Sau
Mã
Mã sau đây sử dụng một khung React và bao gồm cả 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 khung hiển thị
hiệu ứng chuyển đổi.
Đây là cách triển khai cơ bản để kiểm tra xem trình duyệt có hỗ trợ hay không
startViewTransition
và nếu có, thì quá trình chuyển đổi sẽ diễn ra. Nếu không, ứng dụng sẽ quay lại
về chế độ 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
Chính sách của Policybazaar đầu tư đã sử dụng View Transition API (API Chuyển đổi khung hiển thị) cho các phần tử mẹo trợ giúp như "tại sao nên mua", giúp quảng cáo bắt mắt và cải thiện khả năng sử dụng các tính năng đó.
Bằng cách kết hợp Chuyển đổi chế độ xem, chúng tôi đã loại bỏ CSS và JavaScript lặp lại mã chịu trách nhiệm quản lý ảnh động trên nhiều trạng thái. Đã lưu và nâng cao đáng kể trải nghiệm người dùng.—Aman Soni, Trưởng nhóm công nghệ, 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 đè kiểu và ả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 lưu ý khi sử dụng View Transition API
Khi sử dụng nhiều hiệu ứng chuyển đổi chế độ xem trên cùng một trang, hãy đảm bảo rằng bạn có tên chuyển đổi khung hiển thị khác nhau cho từng hiệu ứng hoặc phần để ngăn chặn xung đột.
Trong khi chuyển đổi khung hiển thị đang hoạt động (chuyển đổi), nó sẽ thêm một lớp mới vào
đầu phần còn lại của giao diện người dùng. Vì vậy, hã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 bất ngờ (khi con trỏ thực tế là
vẫn chưa chuyển đi).
Tài nguyên
- Chuyển đổi suôn sẻ và đơn giản nhờ View Transition API
- Giải thích: Xem hiệu ứng chuyển đổi MPA
- Nghiên cứu điển hình: Có thể điều hướng 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 tính năng Chuyển đổi khung hiển thị trên nhiều trình duyệt
- Bạn muốn báo cáo lỗi hay yêu cầu tính năng mới? Chúng tôi rất mong nhận được ý kiến đóng góp của bạn 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 thương mại điện tử
các công ty được hưởng lợi từ việc sử dụng các tính năng mới của CSS và giao diện người dùng, chẳng hạn như Điều hướng cuộn
ảnh động, cửa sổ bật lên, các truy vấn về vùng chứa và bộ chọn has()
.