Trang này được dịch bởi Cloud Translation API.

Xem nghiên cứu điển hình về việc chuyển đổi

Swetha Gopalakrishnan

Saurabh Rajpal

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.

Hỗ trợ trình duyệt

Nguồ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ủ .

Hiệu ứng chuyển đổi ở chế độ xem mờ và trượt khi người dùng nhấp vào đăng nhập trên trang chủ redBus.

Mã

Cách triển khai này sử dụng nhiềuview-transition-namevà ả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-grouptrong 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.

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.

Xem ảnh động về hiệu ứng chuyển đổi trên thẻ "Tại sao nên mua từ Policybazaar" CTA trên trang thông tin về khoản đầu tư.

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().