View Transition API là một yếu tố tạo nên thay đổi trong quá trình phát triển web. Cho dù trang web của bạn có một trang hay nhiều trang, API mạnh mẽ này đều cho phép bạn tạo hiệu ứng chuyển đổi liền mạch giữa các thành phần hiển thị, mang lại trải nghiệm giống như ứng dụng gốc để thu hút người dùng. Hiện có trong Chrome, với các hiệu ứng chuyển đổi chế độ xem tài liệu tương tự sắp có trong Safari.
Ngày càng có nhiều người bắt đầu tìm hiểu về API Chuyển đổi khung hiển thị, đã đến lúc làm sáng tỏ một số quan niệm sai lầm.
Quan niệm sai lầm 1: API Chuyển đổi chế độ xem chụp ảnh màn hình
Khi chạy quá trình chuyển đổi chế độ xem, API sẽ chụp nhanh trạng thái cũ và mới của nội dung. Sau đó, các ảnh chụp nhanh này sẽ được tạo ảnh động, như được mô tả chi tiết trong phần "Cách hoạt động của các hiệu ứng chuyển đổi này" của tài liệu.
Mặc dù bạn có thể sử dụng thuật ngữ ảnh chụp màn hình cho ảnh chụp nhanh cũ, nhưng ảnh chụp nhanh mới không phải là ảnh chụp màn hình mà thực sự là bản trình bày trực tiếp của nút. Hãy xem đây là một phần tử được thay thế.
::view-transition
└─ ::view-transition-group(root)
└─ ::view-transition-image-pair(root)
├─ ::view-transition-old(root) 👈 Screenshot
└─ ::view-transition-new(root) 👈 Live representation
Nhờ khía cạnh trực tiếp này, các bản minh hoạ như thế này sẽ hoạt động: video (được lấy từ ảnh chụp nhanh mới) tiếp tục phát trong khi quá trình chuyển đổi chế độ xem đang diễn ra.
Logic và CSS dùng cho việc này được chi tiết trong tài liệu của chúng tôi.
Quan niệm sai lầm 2: Việc chụp nhiều phần tử sẽ dẫn đến việc nhiều hiệu ứng chuyển đổi khung hiển thị chạy
Khi bạn chụp nhiều phần tử, quá trình chụp nhanh sẽ chụp tất cả trạng thái cũ và mới. Khi chụp .box ngoài phần tử :root, bạn sẽ có được cây giả sau:
::view-transition
└─ ::view-transition-group(root)
| └─ ::view-transition-image-pair(root)
| ├─ ::view-transition-old(root)
| └─ ::view-transition-new(root)
└─ ::view-transition-group(box)
└─ ::view-transition-image-pair(box)
├─ ::view-transition-old(box)
└─ ::view-transition-new(box)
Mặc dù cây này chứa nhiều cặp ảnh chụp nhanh nhưng chỉ có một hiệu ứng chuyển đổi khung hiển thị được chạy.
Hiện tại, Chrome chỉ có thể chạy một hiệu ứng chuyển đổi chế độ xem cho mỗi tài liệu cùng một lúc. Hãy thử nhấp nhanh trong bản minh hoạ này để bắt đầu một hiệu ứng chuyển đổi thành phần hiển thị mới. Bạn sẽ thấy quá trình chuyển đổi đang diễn ra sẽ chuyển sang cuối khi một quá trình chuyển đổi mới bắt đầu.
Quan niệm sai lầm 3: Bạn không thể triển khai hiệu ứng chuyển đổi khung hiển thị do trình duyệt không hỗ trợ
Nhiều nhà phát triển lo ngại rằng họ không thể triển khai hiệu ứng chuyển đổi khung hiển thị vì hiệu ứng này chỉ được hỗ trợ trên Chrome. Tin vui là Safari đang nỗ lực giải quyết vấn đề này và sẽ đưa tính năng này vào bản phát hành Safari 18 sắp tới.
Tuy nhiên, đừng để việc hỗ trợ trình duyệt không ổn định ngăn bạn triển khai hiệu ứng chuyển đổi khung hiển thị ngay hôm nay. Hiệu ứng chuyển đổi khung hiển thị là nội dung hoàn hảo để nâng cao dần. Tài liệu gốc chia sẻ một phương thức để thêm phương pháp này vào mã của bạn.
function handleClick(e) {
// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
updateTheDOMSomehow();
return;
}
// With a View Transition:
document.startViewTransition(() => updateTheDOMSomehow());
}
Nếu trình duyệt của bạn hỗ trợ hiệu ứng chuyển đổi chế độ xem trong cùng một tài liệu, bạn sẽ nhận được phiên bản có ảnh động, được làm phong phú. Nếu trình duyệt của bạn không hoạt động thì bạn sẽ có được trải nghiệm hiện tại. Theo thời gian, khi ngày càng có nhiều trình duyệt hỗ trợ hiệu ứng chuyển đổi chế độ xem, thì càng có nhiều người dùng được trải nghiệm phiên bản phong phú này, tất cả đều tự động.
Điều tương tự cũng áp dụng cho hiệu ứng chuyển đổi chế độ xem giữa các tài liệu. Những trình duyệt không hỗ trợ các thuộc tính này sẽ bỏ qua lựa chọn sử dụng CSS khi phân tích cú pháp các tệp định kiểu.
Phương pháp này đã được triển khai thành công trong thương mại điện tử, như chi tiết trong nghiên cứu điển hình này
Quan niệm sai lầm 4: Hiệu ứng chuyển đổi khung hình làm gián đoạn quá trình kết xuất tăng dần
Có thông báo xác nhận quyền sở hữu rằng hiệu ứng chuyển đổi khung hiển thị làm hỏng quá trình hiển thị gia tăng. Điều này không đúng: Các hiệu ứng chuyển đổi chế độ xem trên nhiều tài liệu được chỉ định để không làm hỏng khía cạnh cơ bản này của web.
Các trình duyệt bắt đầu hiển thị một trang khi có "đủ" nội dung. Trong hầu hết các trình duyệt, điều này xảy ra sau khi tải tất cả các tệp kiểu trong <head>, phân tích cú pháp tất cả JavaScript chặn kết xuất trong <head> và tải đủ mã đánh dấu. Cách chuyển đổi chế độ xem trên nhiều tài liệu không làm thay đổi điều này: nội dung bắt buộc để hiển thị Nội dung đầu tiên hiển thị không bị thay đổi. Sau lần kết xuất đầu tiên này, trình duyệt có thể và sẽ kết xuất nội dung mới nhận được theo từng phần.
Bạn có thể chọn chặn quá trình kết xuất cho đến khi một phần tử nhất định xuất hiện trong DOM. Điều này rất thuận tiện trong trường hợp bạn muốn đảm bảo rằng các thành phần tham gia vào quá trình chuyển đổi chế độ xem đã có trên trang mới.
Để làm như vậy, hãy sử dụng thẻ liên kết sau:
<link rel="expect" blocking="render" href="#elementId">
Thao tác này sẽ ghi đè các phương pháp phỏng đoán của trình duyệt dùng để quyết định thời điểm thực hiện lần hiển thị đầu tiên: lần hiển thị đầu tiên bị trễ cho đến khi phần tử được chỉ định có trong cây DOM.
Tính năng chặn thủ công này có một số biện pháp bảo vệ tích hợp sẵn. Ví dụ: khi thấy thẻ </html> đóng nhưng không thấy phần tử chặn, quá trình kết xuất sẽ không còn bị chặn nữa. Ngoài ra, bạn có thể thêm logic thời gian chờ của riêng mình để xoá thuộc tính chặn bất cứ lúc nào.
Rõ ràng là bạn nên thận trọng khi sử dụng tính năng chặn hiển thị. Tác động của việc chặn hiển thị cần được đánh giá theo từng trường hợp. Theo mặc định, hãy tránh sử dụng blocking=render trừ phi bạn có thể chủ động đo lường và đánh giá tác động của blocking=render đối với người dùng bằng cách đo lường tác động đến các chỉ số hiệu suất.
Quan niệm sai lầm 5: Quá trình chụp nhanh diễn ra chậm hoặc tốn kém
Trong khi View Transition API chuẩn bị chế độ xem mới và lấy ảnh chụp nhanh, người dùng vẫn nhìn thấy chế độ xem cũ. Do đó, người dùng sẽ thấy trang cũ lâu hơn một chút so với khi không có hiệu ứng chuyển đổi chế độ xem. Tuy nhiên, độ trễ này không đáng kể, thực tế chỉ là vài khung hình. Ví dụ: trong Chrome, tác động của pageswap là tối đa 2 khung cũ: Một khung để thực thi logic và một khung bổ sung để đảm bảo ảnh chụp nhanh đã được kết hợp và lưu vào bộ nhớ đệm.
Hơn nữa, dữ liệu cho ảnh chụp nhanh được lấy trực tiếp từ trình kết hợp, vì vậy, không cần thực hiện thêm bước bố cục hoặc vẽ lại để lấy dữ liệu ảnh chụp nhanh.
Quan niệm sai lầm về phần thưởng: Đó là API Chuyển đổi khung hiển thị
Khi nói về lượt chuyển đổi khung hiển thị, mọi người thường nói đến "View Transitions API" (API Chuyển đổi khung hiển thị). Thông tin này không chính xác. API này có tên là "View Transition API" (API Chuyển đổi khung hiển thị). Hãy lưu ý rằng "Transition" ở dạng số ít.
Quan niệm sai lầm này bắt nguồn từ một số bài viết – bao gồm cả tài liệu của chúng tôi về DCC – sử dụng sai thuật ngữ.
Mẹo để nhớ chính xác tên là bạn sử dụng (một) API Chuyển đổi thành phần hiển thị để tạo (một hoặc nhiều) hiệu ứng chuyển đổi thành phần hiển thị.