Có gì mới khi chuyển đổi chế độ xem? (Nội dung cập nhật Google I/O 2024)

Bramus

Xuất bản: Ngày 16 tháng 5 năm 2024

Tại sự kiện Google I/O 2024, tôi đã công bố bước tiếp theo cho hiệu ứng chuyển đổi chế độ xem: hiệu ứng chuyển đổi chế độ xem trên nhiều tài liệu cho các ứng dụng có nhiều trang (MPA).

Ngoài ra, tôi cũng chia sẻ một số điểm cải tiến giúp bạn dễ dàng làm việc với hiệu ứng chuyển đổi khung hiển thị nói chung.

• Chia sẻ kiểu ảnh động giữa các phần tử giả chuyển đổi khung hiển thị bằng view-transition-class.
• Chuyển đổi khung hiển thị có chọn lọc bằng các loại đang hoạt động.

Những điểm cải tiến này áp dụng cho cả hiệu ứng chuyển đổi khung hiển thị trong cùng một tài liệu cho ứng dụng một trang (SPA) và hiệu ứng chuyển đổi khung hiển thị giữa các tài liệu cho MPA.

Hiệu ứng chuyển đổi chế độ xem giữa các tài liệu cho MPA

Trong Chrome 111, nhóm Chrome đã phát hành các hiệu ứng chuyển đổi chế độ xem trong cùng một tài liệu cho các ứng dụng một trang, một tính năng được cộng đồng xây dựng web đón nhận.

Thật vui khi thấy những gì mà nhiều người trong số các bạn đã tạo bằng hiệu ứng chuyển đổi chế độ xem. Từ những cách triển khai điển hình như "làm cho hình thu nhỏ phát triển thành bức ảnh lớn" cho đến những trải nghiệm sống động được tuỳ chỉnh cao như trải nghiệm này của Airbnb. Thật tuyệt!

Tuy nhiên, lần triển khai ban đầu yêu cầu bạn tạo một SPA để sử dụng hiệu ứng chuyển đổi khung hiển thị. Kể từ Chrome 126, điều này không còn xảy ra nữa, giờ đây, các hiệu ứng chuyển đổi chế độ xem được bật theo mặc định cho các thao tác điều hướng cùng nguồn gốc. Giờ đây, bạn có thể tạo một hiệu ứng chuyển đổi khung hiển thị giữa 2 tài liệu khác nhau có cùng nguồn gốc.

Để bật hiệu ứng chuyển đổi chế độ xem giữa các tài liệu, cả hai đầu đều cần chọn sử dụng. Để thực hiện việc này, hãy sử dụng quy tắc @view-transition và đặt giá trị mô tả navigation thành auto.

@view-transition {
  navigation: auto;
}

Chuyển đổi chế độ xem giữa các tài liệu sử dụng cùng các khối và nguyên tắc dựng sẵn như chuyển đổi chế độ xem trong cùng một tài liệu. Các phần tử có view-transition-name được áp dụng sẽ được ghi lại và bạn có thể tuỳ chỉnh ảnh động bằng ảnh động CSS.

Để tuỳ chỉnh hiệu ứng chuyển đổi chế độ xem giữa các tài liệu, hãy sử dụng các sự kiện pageswap và pagereveal. Các sự kiện này cho phép bạn truy cập vào đối tượng chuyển đổi chế độ xem.

• Với pageswap, bạn có thể thực hiện một số thay đổi vào phút cuối trên trang đi ngay trước khi các ảnh chụp nhanh cũ được chụp.
• Với pagereveal, bạn có thể tuỳ chỉnh trang mới trước khi trang đó bắt đầu hiển thị sau khi được khởi tạo.

Trong cả hai sự kiện, bạn đều có quyền truy cập vào một đối tượng NavigationActivation để tuỳ chỉnh hiệu ứng chuyển đổi chế độ xem trên nhiều tài liệu dựa trên các mục nhập cũ và mới trong nhật ký đích đến hoặc loại điều hướng.

Ngoài ra, bạn có thể chờ nội dung tải bằng cách chặn kết xuất và dựa vào tính năng kết xuất trước để cải thiện thời gian tải trước khi quá trình chuyển đổi khung hiển thị diễn ra.

Bản minh hoạ

Bản minh hoạ Stack Navigator này kết hợp tất cả các tính năng này (cùng với một số điểm cải tiến).

Đây là một MPA có các thao tác điều hướng trên nhiều tài liệu, được lưu trữ trên cùng một nguồn gốc. Bằng cách sử dụng pagereveal, loại ảnh động được xác định dựa trên các mục cũ và mới trong nhật ký đích đến.

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition) {
    // Determine animation type based on the old/new history entries
    const transitionClass = determineTransitionClass(navigation.activation.from, navigation.currentEntry);
    document.documentElement.dataset.transition = transitionClass;

    // Cleanup after transition ran
    await e.viewTransition.finished;
    delete document.documentElement.dataset.transition;
  }
});

Đọc tài liệu

Để biết thêm thông tin về cách kích hoạt và tuỳ chỉnh hiệu ứng chuyển đổi chế độ xem giữa các tài liệu, hãy xem tài liệu về hiệu ứng chuyển đổi chế độ xem giữa các tài liệu.

Những điểm cải tiến về hiệu ứng chuyển đổi

Ngoài việc vận chuyển các hiệu ứng chuyển đổi chế độ xem trên nhiều tài liệu cho MPA, Chrome cũng có một số điểm tinh chỉnh để làm việc với hiệu ứng chuyển đổi chế độ xem nói chung.

Những điểm cải tiến này áp dụng cho cả hiệu ứng chuyển đổi khung hiển thị trong cùng một tài liệu đối với SPA và hiệu ứng chuyển đổi khung hiển thị giữa các tài liệu đối với MPA.

Chia sẻ kiểu ảnh động bằng view-transition-class

Cho đến nay, khi tạo hiệu ứng cho nhiều ảnh chụp nhanh theo cùng một cách, bạn cần nhắm đến từng ảnh chụp nhanh riêng lẻ bằng cách lặp lại bộ chọn giả của ảnh chụp nhanh đó cho mọi phần tử có view-transition-name duy nhất.

Với view-transition-class, giờ đây bạn có thể thêm tên dùng chung cho tất cả các ảnh chụp nhanh. Sử dụng tên dùng chung này trong bộ chọn giả để nhắm đến tất cả các ảnh chụp nhanh phù hợp. Điều này dẫn đến các bộ chọn đơn giản hơn nhiều, tự động mở rộng quy mô từ một đến nhiều phần tử.

#cards-wrapper > div {
  view-transition-class: card;
}
html::view-transition-group(.card) {
  animation-timing-function: var(--bounce);
}

Ví dụ về các thẻ sau sử dụng view-transition-class để áp dụng cùng một thời gian tạo ảnh động cho nhiều ảnh chụp nhanh bằng một bộ chọn.

Để tìm hiểu thêm về view-transition-class, hãy đọc tài liệu chuyên biệt về view-transition-class.

Chuyển đổi khung hiển thị có chọn lọc bằng các loại đang hoạt động

Một điểm tinh chỉnh khác đối với hiệu ứng chuyển đổi khung hiển thị là việc bổ sung các loại vào hiệu ứng chuyển đổi khung hiển thị khi chụp và thực hiện hiệu ứng đó. Điều này giúp bạn dễ dàng làm việc với nhiều hiệu ứng chuyển đổi khung hiển thị trên cùng một trang mà không cần khai báo hiệu ứng này thay đổi hiệu ứng kia.

Ví dụ: khi chuyển đến trang tiếp theo hoặc trang trước đó trong một trình tự phân trang, bạn có thể muốn sử dụng các ảnh động khác nhau tuỳ thuộc vào việc bạn đang chuyển đến trang có số thứ tự cao hơn hay thấp hơn trong trình tự.

Trước các loại hoạt động, bạn có thể thêm các lớp vào DOM và phản hồi các lớp đó trong CSS. Tuy nhiên, bạn cũng phải dọn dẹp sau khi quá trình chuyển đổi hoàn tất.

Với các loại hiệu ứng chuyển đổi khung hiển thị, bạn có thể đạt được kết quả tương tự, đồng thời các loại này sẽ tự động được dọn dẹp sau khi hiệu ứng chuyển đổi khung hiển thị kết thúc. Các loại chỉ áp dụng khi chụp hoặc thực hiện chuyển đổi.

Đối với các hiệu ứng chuyển đổi chế độ xem trong cùng một tài liệu, hãy truyền types vào phương thức startViewTransition hiện chấp nhận một đối tượng. update là hàm callback cập nhật DOM và types là một chuỗi các chuỗi.

const direction = determineBackwardsOrForwards();

const t = document.startViewTransition({
  update: updateTheDOMSomehow,
  types: ['slide', direction],
}););

Đối với hiệu ứng chuyển đổi chế độ xem trên nhiều tài liệu, hãy đặt các loại trong quy tắc @view-transition bằng cách sử dụng bộ mô tả types hoặc đặt các loại đó ngay lập tức trong các sự kiện pageswap và pagereveal.

@view-transition {
  navigation: auto;
  types: slide, forwards;
}

Khi đã đặt các loại, bạn có thể phản hồi các loại này trong CSS bằng cách sử dụng bộ chọn giả lớp :active-view-transition-type() và :active-view-transition áp dụng cho gốc chuyển đổi khung hiển thị.

/* Animation styles for forwards type only */
html:active-view-transition-type(forwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-left;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-right;
  }
}

Để tìm hiểu thêm về các loại hiệu ứng chuyển đổi khung hiển thị, hãy tham khảo tài liệu chuyên biệt về hiệu ứng chuyển đổi khung hiển thị trong cùng một tài liệu và hiệu ứng chuyển đổi khung hiển thị giữa các tài liệu.

Phản hồi

Chúng tôi luôn trân trọng ý kiến phản hồi của nhà phát triển. Để làm như vậy, hãy gửi vấn đề cho Nhóm công tác CSS trên GitHub kèm theo đề xuất và câu hỏi. Đặt tiền tố cho vấn đề của bạn bằng [css-view-transitions].

Nếu gặp phải lỗi, bạn nên gửi thông báo lỗi cho Chromium.