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à hiệu ứng chuyển đổi dạng ảnh động và liền mạch giữa các trạng thái khác nhau của giao diện người dùng của trang web hoặc ứng dụng. View Transition 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. API này mang lại nhiều lợi ích so với các phương pháp JavaScript trước đây, bao gồm:

Cải thiện trải nghiệm người dùng: Các hiệu ứng chuyển đổi mượt mà và các tín hiệu 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 thao tá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: Việc duy trì tính liên tục giữa các thành phần hiển thị sẽ giảm tải nhận thức và giúp người dùng luôn định hướng được 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.
Giao diện thẩm mỹ hiện đại: Các hiệu ứng chuyển đổi được cải thiện góp phần mang lại trải nghiệm người dùng tinh tế và hấp dẫn.

Hỗ trợ trình duyệt

Nguồ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ử cải thiện 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ừ API chuyển đổi khung hiển thị.

redBus

redBus luôn cố gắng tạo ra sự đồng nhất nhất có thể giữa trải nghiệm gốc và trải nghiệm web. Trước khi có View Transition API, 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 là một thách thức. Tuy nhiên, với API, chúng tôi nhận thấy việc tạo các hiệu ứng chuyển đổi trên nhiều hành trình của người dùng sẽ giúp trải nghiệm web 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 tính năng này trở thành một tính năng không thể thiếu đối với mọi trang web.—Amit Kumar, Nhà quản lý kỹ thuật cấp cao, redBus.

Nhóm đã triển khai các hiệu ứng chuyển đổi thành phần hiển thị ở nhiều nơi. Dưới đây là ví dụ về cách kết hợp ảnh động mờ dần và trượt vào biểu tượng đăng nhập trên trang chủ.

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

Mã

Phương thức triển khai này sử dụng nhiềuview-transition-name và ảnh động tuỳ chỉnh (scale-down và 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 cho thành phần đó riêng biệt. Việc tạo một view-transition-name duy nhất mới cũng tạo một ::view-transition-group mới trong cây phần tử giả (hiển thị trong mã sau), cho phép thao tác riêng 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 hiệu ứng chuyển đổi khung hiển thị để thêm ảnh động mờ 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ễ 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.

Mã

Mã sau đây sử dụng 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 chuyển đổi chế độ xem. Đâ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ì có thực hiện quá trình chuyển đổi hay không. Nếu không, hệ thống 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 API Chuyển đổi khung hiển thị trên các phần trợ giúp như "lý do mua", giúp các phần này trở nên hấp dẫn về mặt hình ảnh và cải thiện việc sử dụng các tính năng đó.

Bằng cách kết hợp tính năng 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 nỗ lực phát triển 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 chuyển đổi trên lời kêu gọi hành động "Lý do mua từ Policybazaar" 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 đè các 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 cân nhắc khi sử dụng API Chuyển đổi chế độ xem

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 chế độ xem khác nhau cho mỗi hiệu ứng hoặc phần để tránh xung đột.

Khi hiệu ứng chuyển đổi khung hiển thị đang hoạt động (đang chuyển đổi), hiệu ứng này sẽ thêm một lớp mới lên trên 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 quá trình chuyển đổi khi di chuột, vì sự kiện mouseLeave sẽ được kích hoạt một cách không mong muốn (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 bằng View Transition API
Video giải thích: Chuyển đổi chế độ xem cho MPA
Nghiên cứu điển hình: Chuyển đổi mượt mà giữa các thành phần hiển thị
Nghiên cứu điển hình: Web có thể làm được gì!? | Cung cấp tính năng điều hướng giống như ứng dụng
Đề xuất về khả năng tương tác: Cung cấp tính năng Chuyển đổi khung hiển thị trên các trình duyệt
Bạn muốn báo cáo lỗi hay yêu cầu thêm tính năng mới? Chúng tôi muốn biết ý kiến 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 để biết cách các công ty thương mại điện tử 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 do cuộn, cửa sổ bật lên, truy vấn vùng chứa và bộ chọn has().