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

Bramus

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

Tại Google I/O 2024, tôi đã công bố bước tiếp theo cho các hiệu ứng chuyển đổi thành phần hiển thị: hiệu ứng chuyển đổi thành phần hiển thị trên nhiều tài liệu cho các ứng dụng nhiều trang (MPA).

Ngoài ra, tôi đã chia sẻ một số điểm cải tiến giúp bạn dễ dàng xử lý các 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ả lập chuyển đổi chế độ xem bằng view-transition-class.
• Chuyển đổi chế độ xem có chọn lọc với 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.

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 chuyển đổi chế độ xem 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 nồng nhiệt.

Thật vui khi thấy nhiều bạn đã tạo ra những ứng dụng thú vị bằng hiệu ứng chuyển đổi khung hiển thị. Từ các cách triển khai thông thường "biến hình thu nhỏ thành ảnh lớn" cho đến các 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, cách triển khai ban đầu yêu cầu bạn phải 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, các hiệu ứng chuyển đổi khung hiển thị hiện đượ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 hiệu ứng chuyển đổi chế độ xem giữa hai tài liệu khác nhau có cùng nguồn gốc.

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

@view-transition {
  navigation: auto;
}

Các hiệu ứng 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 như các hiệu ứng 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 chụp 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 trên nhiều 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 sắp chuyển ngay trước khi ả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 chạy.

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

Ngoài ra, bạn có thể chờ nội dung tải bằng tính năng 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 thành phần hiển thị chạy.

Bản minh hoạ

Bản minh hoạ về Trình điều hướng ngăn xếp 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 nhập nhật ký đích cũ và mới.

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.

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

Ngoài việc phân phối 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 để xử lý các 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 cho SPA và hiệu ứng chuyển đổi khung hiển thị giữa các tài liệu cho MPA.

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

Cho đến nay, khi tạo ảnh độ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ả cho mọi phần tử có view-transition-name duy nhất.

Giờ đây, với view-transition-class, bạn có thể thêm tên dùng chung vào tất 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ả ảnh chụp nhanh khớ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 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ề thẻ sau sử dụng view-transition-class để áp dụng cùng một thời gian ả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 dụng về view-transition-class.

Chuyển đổi chế độ xem có chọn lọc với 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 thành phần hiển thị là việc giới thiệu tính năng thêm loại vào hiệu ứng chuyển đổi thành phần 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 xử lý 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 cao hơn hay trang thấp hơn trong trình tự.

Trước các loại đang 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 chuyển đổi khung hiển thị, bạn có thể đạt được kết quả tương tự, với lợi ích bổ sung là các loại này sẽ tự động được dọn dẹp sau khi quá trình 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. Phương thức này 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 tại @view-transition bằng cách sử dụng chỉ số mô tả types hoặc đặt các loại đó ngay trong 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 lớp giả :active-view-transition-type() và :active-view-transition áp dụng cho gốc chuyển đổi thành phần 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 chuyển đổi thành phần hiển thị, hãy tham khảo tài liệu chuyên dụng dành cho các chuyển đổi thành phần hiển thị trong cùng một tài liệu và các chuyển đổi thành phần 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 làm việc về CSS trên GitHub kèm theo các đề xuất và câu hỏi. Đặt tiền tố [css-view-transitions] cho vấn đề của bạn.

Nếu bạn gặp lỗi, hãy gửi lỗi Chromium.