Tại Google I/O 2024, tôi đã công bố bước tiếp theo cho việc chuyển đổi chế độ xem: chuyển đổi chế độ xem trên nhiều tài liệu cho ứ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 thao tác dễ dàng hơn với các hiệu ứng chuyển đổi chế độ xem nói chung.
- Chia sẻ kiểu ảnh động giữa các phần tử giả chuyển đổi khung hiển thị với
view-transition-class. - Hiệu ứng chuyển đổi khung hiển thị 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ả quá trình chuyển đổi chế độ xem cùng một tài liệu cho các ứng dụng trang đơn (SPA) và chuyển đổi chế độ xem nhiều tài liệu cho MPA.
Chuyển đổi chế độ xem nhiều tài liệu cho MPA
Trong Chrome 111, nhóm Chrome đã cung cấp các chuyển đổi chế độ xem cùng một tài liệu cho các ứng dụng trang đơn, một tính năng được đón nhận nồng nhiệt trong cộng đồng xây dựng web.
Thật tuyệt vời khi được chứng kiến những gì mà nhiều bạn đã xây dựng bằng hiệu ứng chuyển đổi khung hiển thị. Đa dạng, từ những cách triển khai điển hình giúp "tăng hình thu nhỏ thành ảnh lớn" cho đến những trải nghiệm sống động được tuỳ chỉnh cao, chẳng hạn như trải nghiệm này trên Airbnb. Thật tuyệt!
Tuy nhiên, quá trình triển khai ban đầu yêu cầu bạn phải tạo SPA để sử dụng chuyển đổi thành phần hiển thị. Kể từ Chrome 126, điều này không còn như vậy nữa. Tính năng chuyển đổi khung hiển thị hiện được bật theo mặc định cho các hoạt động điều hướng cùng nguồn gốc. Giờ đây, bạn có thể tạo lượt chuyển đổi chế độ xem giữa hai tài liệu khác nhau có cùng nguồn gốc.
Để bật chuyển đổi chế độ xem nhiều tài liệu, cả hai bên đều cần chọn sử dụng. Để làm việc này, hãy sử dụng quy tắc @view-transition và đặt chỉ số mô tả navigation thành auto.
@view-transition {
navigation: auto;
}
Chuyển đổi chế độ xem nhiều tài liệu sử dụng cùng một thành phần và nguyên tắc như chuyển đổi chế độ xem cùng một tài liệu. Các phần tử có áp dụng view-transition-name sẽ được ghi lại và bạn có thể tuỳ chỉnh ảnh động bằng cách sử dụng ảnh động CSS.
Để tuỳ chỉnh các hiệu ứng chuyển đổi chế độ xem nhiều tài liệu, hãy sử dụng các sự kiện pageswap và pagereveal để có quyề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 chót trên trang gửi đi ngay trước khi chụp các ảnh chụp nhanh cũ. - 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 khởi chạy.
Trong cả hai sự kiện, bạn có quyền truy cập vào đối tượng NavigationActivation để tuỳ chỉnh hiệu ứng chuyển đổi chế độ xem nhiều tài liệu dựa trên các mục nhật ký đích đến 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 hiển thị và dựa vào kết xuất trước để cải thiện thời gian tải trước khi chạy chuyển đổi chế độ xem.
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).
pagereveal dựa trên thông tin kích hoạt chức năng điều hướng. Phương thức kết xuất trước cũng được sử dụng.Đây là một MPA với các thành phần đ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ậ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 nhiều tài liệu, hãy xem tài liệu về quá trình chuyển đổi chế độ xem nhiều tài liệu.
Xem các điểm cải tiến về hiệu ứng chuyển cảnh
Bên cạnh việc chuyển đổi chế độ xem nhiều tài liệu cho MPA, Chrome cũng có một số điều chỉnh để xử lý 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ả quá trình chuyển đổi chế độ xem cùng một tài liệu cho SPA và chuyển đổi chế độ xem nhiều tài liệu cho MPA.
Chia sẻ kiểu ảnh động với view-transition-class
Hỗ trợ trình duyệt
- 125
- 125
- x
- x
Cho đến nay, khi tạo ảnh động cho nhiều bản tổng quan nhanh theo cách tương tự, bạn cần nhắm đến từng bản tổng quan 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 riêng biệt.
Với view-transition-class, giờ đây, bạn có thể thêm tên được chia sẻ vào tất cả bản tổng quan nhanh. Hãy sử dụng tên được chia sẻ này trong bộ chọn giả để nhắm đến tất cả bản tổng quan nhanh phù hợp. Điều này giúp bộ chọn trở nên đơn giản hơn nhiều, giúp tự động điều chỉnh tỷ lệ từ một thành 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 đây 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.
view-transition-class, thuộc tính này sẽ áp dụng cùng một animation-timing-function cho tất cả các thẻ, ngoại trừ những thẻ đã thêm hoặc bị xoá.Để tìm hiểu thêm về view-transition-class, hãy đọc tài liệu dành riêng cho view-transition-class.
Hiệu ứng chuyển đổi khung hiển thị có chọn lọc với các loại đang hoạt động
Một tinh chỉnh khác để xem hiệu ứng chuyển đổi là việc thêm loại vào hiệu ứng chuyển đổi khung hiển thị khi chụp và thực hiện chuyển đổi đó. Nhờ vậy, bạn sẽ dễ dàng làm việc với nhiều hiệu ứng chuyển đổi thành phần hiển thị trên cùng một trang mà không cần phải thay đổi phần khai báo thành phần hiển thị này.
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 sẽ 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 của mình. 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ự, cộng thêm lợi ích khác của 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ị hoàn tất. Các kiểu chỉ áp dụng khi chụp hoặc thực hiện chuyển đổi.
Đối với các lượt chuyển đổi chế độ xem cùng 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 đối tượng. update là hàm callback cập nhật DOM và types là một chuỗi chuỗi.
const direction = determineBackwardsOrForwards();
const t = document.startViewTransition({
update: updateTheDOMSomehow,
types: ['slide', direction],
}););
Để chuyển đổi chế độ xem 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 chỉ số mô tả types hoặc thiết lập nhanh chúng trong các sự kiện pageswap và pagereveal.
@view-transition {
navigation: auto;
types: slide, forwards;
}
Sau 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 chế độ xem.
/* 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 chế độ xem, hãy tham khảo tài liệu chuyên biệt chuyển đổi chế độ xem cùng một tài liệu và chuyển đổi chế độ xem nhiều tài liệu.
Ý kiến 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 hoạt động CSS trên GitHub kèm theo nội dung đề xuất và câu hỏi. Thêm tiền tố [css-view-transitions] vào vấn đề của bạn.
Nếu bạn gặp lỗi thì hãy gửi lỗi Chromium.