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.
• Hiệu ứng chuyển đổi chế độ xem có chọn lọc với các kiểu đ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 trên nhiều 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 tuyệt khi thấy nhiều người trong số các bạn đã xây dựng những công cụ đó bằng các hiệu ứng chuyển đổi chế độ xem. 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 at @view-transition và thiết lập chỉ số mô tả navigation thành auto.

@view-transition {
  navigation: auto;
}

Việc chuyển đổi chế độ xem trên nhiều tài liệu sử dụng các thành phần và nguyên tắc giống như hiệu ứng chuyển đổi giữa các chế độ xem 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 đến 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 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 với view-transition-class

Cho đến thời điểm này, 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.

Với view-transition-class, giờ đây, bạn có thể thêm tên dùng chung vào tất cả ảnh chụp nhanh. Dùng tên chung này trong bộ chọn giả để nhắm mục tiêu tất cả các bản tổng quan nhanh khớp. Điều này dẫn đến các bộ chọn đơn giản hơn nhiều, tự động điều chỉnh tỷ lệ 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 cho ả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 kiểu đ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 khi 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 của bạn. 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.

Để chuyển đổi khung hiển thị cùng 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],
}););

Để 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 chỉ số mô tả types hoặc thiết lập nhanh các loại đó 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. Để thực hiện việc này, hãy gửi vấn đề cho Nhóm hoạt động 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.