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

Swetha Gopalakrishnan
Swetha Gopalakrishnan
Saurabh Rajpal
Saurabh Rajpal

Hiệu ứng chuyển đổi khung hiển thị là sự chuyển đổi liền mạch và động giữa các trạng thái khác nhau của một trang web hoặc giao diện người dùng của ứng dụng. View Transition API đã được thiết kế để giú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. So với các phương pháp sử dụng JavaScript trước đó, API này mang lại nhiều lợi ích, 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 hình ảnh sẽ hướng dẫn người dùng các thay đổi trong giao diện người dùng, giúp thao tác 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 khung hiển thị sẽ giúp 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 ra ảnh động mượt mà hơn.
  • Thẩm mỹ hiện đại: Các hiệu ứng chuyển đổi được cải tiến góp phần mang lại trải nghiệm chỉn chu và hấp dẫn cho người dùng.

Hỗ trợ trình duyệt

  • 111
  • 111
  • x
  • 18

Nguồn

Bài đăng này nằm trong 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á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 tìm hiểu 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 trải nghiệm gốc và trải nghiệm web nhiều nhất có thể. Trước khi có View Transition API, chúng tôi gặp nhiều khó khăn khi triển khai các ảnh động này trên các thành phần trên web. Tuy nhiên, 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 là một cách trực quan để mang lại trải nghiệm web giống với ứ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 là tính năng không thể thiếu trên mọi trang web. – Amit Kumar, Giám đốc kỹ thuật cấp cao của redBus.

Nhóm này đã triển khai việc chuyển đổi khung hiển thị ở nhiều nơi. Dưới đây là ví dụ về 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ủ.

Chuyển đổi làm mờ và trượt trong 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ềuview-transition-name và ả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 với phần còn lại của trang để tạo ảnh động một cách riêng biệt. Việc tạo một view-transition-name mới duy nhất cũng sẽ tạo ra một ::view-transition-group mới trong cây phần tử giả (minh hoạ trong mã sau), cho phép bạn 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 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. Khi 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 tạo ra bất kỳ ảnh hưở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 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ó, hiệu ứng chuyển đổi có thực hiện được không. Nếu không, lệnh 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 Transition API (API Chuyển đổi khung hiển thị) để hỗ trợ các phần tử tiền boa như "lý do nên mua", khiến các thành phần này trở nên hấp dẫn về mặt hình ảnh 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 hiệu ứ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. Việc 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 kỹ thuật, Policybazaar.

Xem ảnh động về hiệu ứng chuyển đổi trong lời kêu gọi hành động "Tại sao nên mua từ Policybazaar" trên một 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 khung hiển thị 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 để tránh 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 ở đầ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 đột ngột (khi con trỏ thực tế vẫn chưa di chuyển).

Tài nguyên

Hãy 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ử hưởng lợi từ việc sử dụng các tính năng mới về CSS và giao diện người dùng, chẳng hạn như Ảnh động di chuyển, cửa sổ bật lên, truy vấn vùng chứa và bộ chọn has().