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 là một trang hay nhiều trang, API mạnh mẽ này đều cho phép bạn tạo ra sự chuyển đổi liền mạch giữa các chế độ xem, mang lại trải nghiệm giống như quảng cáo gốc, thu hút người dùng. Tính năng này hiện có trong Chrome và sẽ sớm có các hiệu ứng chuyển đổi chế độ xem tài liệu tương tự trong Safari.
Ngày càng có nhiều người bắt đầu tìm hiểu về View Transition API (API Chuyển đổi khung hiển thị), đã đến lúc làm rõ một số quan niệm sai lầm.
Quan niệm sai lầm 1: View Transition API chụp ảnh màn hình
Khi chạy một lượt chuyển đổi khung hiển thị, API sẽ chụp nhanh trạng thái cũ và mới của nội dung. Các ảnh chụp nhanh này sau đó sẽ được tạo hiệu ứng động, như đã nêu 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à đại diện trực tiếp cho nút. Hãy xem đây là một thành phần bị 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) sẽ 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ử dẫn đến việc chạy nhiều hiệu ứng chuyển đổi khung hiển thị
Khi bạn chụp nhiều phần tử, quá trình chụp nhanh sẽ chụp lại tất cả cá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 bị giới hạn chạy đồng thời một lượt chuyển đổi chế độ xem cho mỗi tài liệu. Hãy thử nhấp nhanh trong bản minh hoạ này để bắt đầu một lượt chuyển đổi khung hiển thị mới. Bạn sẽ thấy quá trình chuyển đổi đang diễn ra bỏ qua đến cuối khi 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 chuyển đổi khung hiển thị do trình duyệt 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ì tính năng này chỉ được hỗ trợ trên Chrome. Tin vui là Safari đang nghiên cứu tính năng 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 để tính năng 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à chất liệu hoàn hảo để nâng cao dần dần. Tài liệu gốc có chia sẻ phương pháp 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ợ các hiệu ứng chuyển đổi chế độ xem cùng một tài liệu, thì bạn sẽ nhận được phiên bản ảnh động và chi tiết 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 nhiều trình duyệt hỗ trợ chuyển đổi khung hiển thị, nhiều người dùng hơn sẽ đượ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 chuyển đổi chế độ xem giữa nhiều tài liệu. Những trình duyệt không hỗ trợ biểu định kiểu sẽ bỏ qua Chọn sử dụng CSS khi phân tích cú pháp biểu định kiểu.
Phương pháp này đã được triển khai thành công trong lĩnh vực thương mại điện tử, như đã nêu 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 hiển thị làm hỏng quá trình kết xuất gia tăng
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: Chuyển đổi chế độ xem trên nhiều tài liệu được chỉ định để không phá vỡ 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. Điều này xảy ra trong hầu hết các trình duyệt – sau khi tải tất cả biểu định kiểu trong <head>, phân tích cú pháp tất cả JavaScript chặn hiển thị 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 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 hiển thị đầu tiên này, trình duyệt có thể–và sẽ–tiếp tục hiển thị nội dung mới nhận được.
Bạn có thể chọn chặn hiển thị cho đến khi một phần tử nhất định có 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.
Để thực hiện việc này, hãy sử dụng thẻ liên kết này:
<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 kết xuất đầ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.
Quy tắc chặn thủ công này có tích hợp một số biện pháp bảo vệ. Ví dụ: khi bạn nhìn thấy thẻ đóng </html> nhưng phần tử chặn lại không xuất hiệ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à đo lường mức độ tác động đối với người dùng, bằng cách đo lường mức độ tác động đối với các chỉ số hiệu suất.
Quan niệm sai lầm 5: Quá trình chụp nhanh chậm hoặc tốn kém
Mặc dù View Transition API chuẩn bị khung hiển thị mới và nhận ảnh chụp nhanh, nhưng người dùng vẫn thấy khung hiển thị cũ. Do đó, người dùng sẽ nhìn thấy trang cũ lâu hơn một chút so với khi không có chuyển đổi chế độ xem. Tuy nhiên, độ trễ này không đáng kể và thực tế chỉ là một vài khung hình. Trong Chrome, tác động của pageswap tối đa là 2 khung hình cũ: Một là thực thi logic cùng với một khung bổ sung nhằm đảm bảo ảnh chụp nhanh đã được tổng 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 tổng hợp, vì vậy, bạn không cần phải thực hiện thêm bố cục hay bước vẽ lại nào để lấy dữ liệu ảnh chụp nhanh.
Thêm một quan niệm sai lầm khác: Đó là View Transitions API
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 riêng chúng tôi về DCC) sử dụng từ ngữ không phù hợp.
Mẹo để nhớ tên chính xác là bạn sử dụng (một) View Transition API để tạo (một hoặc nhiều) lượt chuyển đổi khung hiển thị.