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

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X LinkedIn
Saurabh Rajpal
Saurabh Rajpal
X LinkedIn

Hiệu ứng chuyển đổi chế độ xem là hiệu ứng chuyển đổi liền mạch và có hiệu ứng động giữa các trạng thái khác nhau của giao diện người dùng trên trang web hoặc ứng dụng. View Transition API được thiết kế để cho phép bạn tạo những 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 hơn 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à tín hiệu trực quan 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 thao tác điều hướng diễn ra tự nhiên và ít gây khó chịu hơn.
  • Tính liên tục về mặt hình ảnh: Duy trì cảm giác liên tục giữa các khung hiển thị giúp giảm tải nhận thức và giúp người dùng định hướng trong ứng dụng.
  • Hiệu suất: API này 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 thiện góp phần mang lại trải nghiệm người dùng tinh tế và hấp dẫn.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox Technology Preview: supported.
  • Safari: 18.

Source

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 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ự tương đồng nhiều nhất có thể giữa trải nghiệm trên web và trải nghiệm gốc của họ. Trước khi có View Transition API, việc triển khai các ảnh động này trên tài sản web của chúng tôi là một thách thức. Nhưng với API này, chúng tôi nhận thấy việc tạo hiệu ứng chuyển đổi trên nhiều hành trình của người dùng rất trực quan, giúp trải nghiệm trên web giống như trải nghiệm trên ứng dụng hơn. Tất cả những điều này cùng với lợi ích về hiệu suất khiến đây trở thành một tính năng bắt buộc phải có cho tất cả các trang web. – Amit Kumar, Quản lý cấp cao về kỹ thuật, redBus.

Nhóm đã triển khai hiệu ứng chuyển đổi khung hiển thị ở nhiều nơi. Sau đây là ví dụ về sự kết hợp giữa hiệu ứng mờ dần và hiệu ứng trượt vào cho biểu tượng đăng nhập trên trang chủ.

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

Mã

Cách triển khai này sử dụng nhiều view-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 riêng cho thành phần đó. 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ả (xuất hiện trong mã sau), cho phép thao tác riêng 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 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ỏ 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ễ chịu hơn so với việc 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ã

Đoạn 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.Tìm hiểu thêm về cách làm việc với các khung để triển khai hiệu ứng chuyển đổi chế độ xem. Đây là một 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ì sẽ thực hiện hiệu ứng chuyển đổi. Nếu không, nó 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

Danh mục đầu tư của Policybazaar đã sử dụng View Transition API trên các phần tử mẹo trợ giúp như "lý do nên mua", giúp các phần tử này trở nên hấp dẫn về mặt thị giác 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 View Transitions, chúng tôi đã loại bỏ mã CSS và JavaScript lặp đi lặp lại chịu trách nhiệm quản lý các hoạt ảnh 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à nâng cao đáng kể trải nghiệm người dùng. –Aman Soni, Trưởng nhóm kỹ thuật, Policybazaar.

Ảnh động chuyển đổi chế độ xem trên CTA "Lý do nên mua của Policybazaar" trên trang thông tin về khoản đầu tư.

Mã

Đoạn 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 View Transition 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 rằng bạn có một view-transition-name khác cho mỗi hiệu ứng hoặc phần để tránh xung đột.

Trong khi một 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 hiệu ứng 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

Khám phá các bài viết khác trong loạt bài này để tìm hiểu về cách các công ty thương mại điện tử hưởng lợi từ việc sử dụng CSS và các tính năng giao diện người dùng mới như ảnh động dựa trên thao tác cuộn, cửa sổ bật lên, truy vấn vùng chứa và bộ chọn has().