API Chuyển đổi khung hiển thị cho phép bạn cập nhật DOM trong một bước, đồng thời tạo hiệu ứng chuyển đổi dạng ảnh động giữa hai trạng thái.
Các loại hiệu ứng chuyển đổi này là một tính năng thường xuyên được các nhà phát triển yêu cầu, bao gồm cả tôi. Tôi nghĩ rằng chúng tôi đã có thể cung cấp tính năng này theo cách cân bằng giữa các giá trị mặc định tốt với khả năng mở rộng và tuỳ chỉnh. Nghe có vẻ như chúng tôi đang tự khen mình, nhưng ý kiến phản hồi của nhà phát triển là yếu tố then chốt trong quá trình thiết kế tính năng này. Nguyên mẫu trước đó của tính năng này kém linh hoạt hơn nhiều và những người (như bạn?) đã dành thời gian để chơi với các nguyên mẫu và đưa ra ý kiến phản hồi đã khiến chúng tôi phải suy nghĩ lại hoàn toàn. Xin cảm ơn!
Để nắm bắt tính năng này và thử nghiệm một số bản minh hoạ, hãy xem hướng dẫn của chúng tôi. Nếu bạn cảm thấy còn thiếu thông tin nào đó, vui lòng liên hệ với tôi trên Twitter, Mastodon hoặc qua email.
View Transition API hiện chỉ có trong Chrome; rất may là bạn có thể sử dụng API này như một tính năng nâng cao dần dần. Hướng dẫn này bao gồm một hàm trợ giúp mà bạn có thể sử dụng trên các trình duyệt, nhưng chỉ những trình duyệt hỗ trợ chuyển đổi chế độ xem mới có ảnh động.
Chúng tôi phát triển tính năng này trong Nhóm làm việc về CSS, với ý kiến đóng góp của các nhà cung cấp trình duyệt và nhà cung cấp độc lập khác. Chúng tôi không biết liệu các trình duyệt khác có áp dụng tính năng Chuyển đổi khung hiển thị hay không và khi nào áp dụng, nhưng hãy theo dõi quan điểm của Mozilla về các tiêu chuẩn và quan điểm của WebKit về các tiêu chuẩn.
Nhưng chúng ta vẫn chưa "hoàn tất"!
Trang đích chức năng trong Chrome 111 chỉ là bản phát hành đầu tiên. Chúng tôi hy vọng đã tìm thấy tất cả lỗi, nhưng vui lòng báo cáo mọi vấn đề bạn gặp phải tại crbug.com, tốt nhất là kèm theo bản minh hoạ rút gọn. Nếu bạn không quen hoặc không thoải mái với việc này, hãy liên hệ với tôi trên Twitter, Mastodon hoặc qua email để tôi hỗ trợ bạn.
Bản phát hành này là một phần nhỏ nhưng hy vọng sẽ hữu ích trong bức tranh lớn hơn. Chúng tôi đã phác thảo một số phần mở rộng cho tính năng này để đảm bảo các bộ phận mà chúng tôi vận chuyển hôm nay có khả năng tương thích trong tương lai.
Dưới đây là bản xem trước về những gì chúng tôi đang nghĩ đến. Các tính năng này không được sắp xếp theo thứ tự ưu tiên (có thể tính năng đầu tiên là quan trọng nhất đối với nhiều người). Vì vậy, chúng tôi rất mong nhận được ý kiến phản hồi của bạn về những tính năng bổ sung quan trọng nhất đối với bạn.
Hiệu ứng chuyển đổi giữa các tài liệu
Đây là tính năng mà tôi nghĩ hầu hết các nhà phát triển muốn chúng tôi tiếp tục cải tiến. Tin vui là chúng tôi đang nỗ lực để cải tiến tính năng này!
API Chuyển đổi thành phần hiển thị được thiết kế để có thể hoạt động trên các tài liệu cùng nguồn gốc. Điểm khác biệt duy nhất là thay vì startViewTransition báo hiệu thay đổi trạng thái DOM, chính thành phần điều hướng sẽ báo hiệu thay đổi đó.
Nguyên mẫu của chúng tôi về điều này nằm sau cờ chrome://flags/#view-transition-on-navigation. Sau đây là một bản minh hoạ cực kỳ đơn giản và một bản minh hoạ phức tạp hơn.
Để tiếp tục, chúng ta cần tìm hiểu cách mỗi trang chọn tham gia quá trình chuyển đổi. Hiện tại, chúng ta đang sử dụng thẻ meta: <meta name="view-transition" content="same-origin">, nhưng chúng tôi cho rằng CSS là nơi phù hợp hơn để làm việc này. Chúng tôi cũng muốn giúp bạn dễ dàng biết được loại trang mà bạn đang chuyển đổi, tốt nhất là không cần phải viết JavaScript.
Chúng tôi còn rất nhiều việc phải làm và chúng tôi muốn làm "đúng" hơn là "nhanh", nhưng đây chắc chắn là một ưu tiên của chúng tôi.
Ảnh động do trình tổng hợp điều khiển
Theo mặc định, chúng tôi chọn tạo ảnh động cho chiều rộng và chiều cao trên các nhóm chuyển đổi vì việc này dễ tuỳ chỉnh hơn nhiều. Tuy nhiên, điều này có nghĩa là ảnh động chạy trên luồng chính, không phải là lựa chọn lý tưởng, đặc biệt là trong quá trình tải trang.
Chúng tôi dự định phát hiện ảnh động mặc định và các tuỳ chỉnh phổ biến, sau đó diễn giải lại các ảnh động đó dưới dạng ảnh động do trình kết hợp điều khiển để cải thiện hiệu suất.
Chuyển đổi trong phạm vi
Hiện tại, các lượt chuyển đổi SPA được đưa vào phạm vi toàn bộ tài liệu và mỗi lần chỉ có thể chạy một lượt chuyển đổi. Chúng tôi muốn giới thiệu một tính năng cho phép chuyển đổi trong phạm vi một phần tử cụ thể để nhiều thành phần trang có thể chạy chuyển đổi một cách độc lập.
Ví dụ: trình phát video được nhúng có thể sử dụng hiệu ứng chuyển đổi chế độ xem cùng lúc với tiện ích trò chuyện được nhúng.
Nhóm chuyển đổi lồng nhau
Hiện tại, tất cả ::view-transition-group đều là anh chị em. Điều này thường là một điều tốt vì cho phép các thành phần hiển thị chuyển đổi từ vùng chứa này sang vùng chứa khác và bạn không phải lo lắng về việc cắt bớt.
Tuy nhiên, đôi khi bạn muốn một thành phần hiển thị được cắt bớt bởi một thành phần mẹ, thành phần mẹ này cũng có thể tham gia vào quá trình chuyển đổi.
Chúng ta muốn điều tra một lựa chọn sử dụng đặt một ::view-transition-group cụ thể trong một ::view-transition-group khác.
Các lớp chuyển đổi
Mỗi view-transition-name phải là duy nhất. Đó là cách chúng tôi xác định rằng một phần tử cụ thể về mặt khái niệm là "giống nhau" ở cả hai bên của thay đổi DOM, ngay cả khi đó không phải là cùng một phần tử.
Tuy nhiên, đôi khi các đối tượng có view-transition-name khác nhau phải sử dụng cùng một loại ảnh động. Hiện tại, điều này có nghĩa là thêm một quy tắc bộ chọn cho mỗi view-transition-name.
Chúng ta muốn thêm một cách để tạo các lớp chuyển đổi nhằm khắc phục hạn chế này.
Bỏ qua các phần tử ngoài màn hình
Nếu bạn cung cấp view-transition-name cho một phần tử, thì phần tử đó sẽ tham gia vào quá trình chuyển đổi dưới dạng một nhóm riêng. Đôi khi, điều này không lý tưởng. Ví dụ: nếu bạn cung cấp view-transition-name cho tiêu đề và chuyển từ trạng thái cuộn xuống 2000 pixel sang trạng thái ở đầu trang, thì tiêu đề sẽ tạo ảnh động từ khoảng cách 2000 pixel, điều này sẽ không chính xác về thời gian.
Thay vào đó, chúng ta muốn thêm một tuỳ chọn chọn sử dụng trong đó một phần tử sẽ bị bỏ qua, như thể phần tử đó không có view-transition-name, nếu phần tử đó nằm hoàn toàn bên ngoài khung nhìn.
Bạn đã có thể thực hiện việc này bằng JavaScript bằng cách thiết lập động style.viewTransitionName, nhưng có vẻ như chúng ta nên có một giải pháp khai báo cho việc này.
Ảnh động do requestAnimationFrame điều khiển
Bạn đã có thể tạo ảnh động chuyển đổi khung hiển thị bằng JavaScript thông qua API ảnh động trên web, nhưng đôi khi bạn cần điều khiển từng khung hình bằng requestAnimationFrame.
Bạn có thể làm việc đó, nhưng hơi khó. Sau đây là một bản minh hoạ với một số trình trợ giúp mà bạn có thể thấy hữu ích. Chúng tôi muốn làm cho ứng dụng này không bị can thiệp!
Chúng ta sẽ thực hiện việc này theo hai phần. Một là cung cấp một API để cho biết thời điểm ảnh động hoàn tất. Thứ hai, bằng cách cấp quyền truy cập JavaScript vào các phần tử giả. Phần thứ hai có thể là một công việc khá lớn, nhưng có vẻ như đó là việc nên làm về lâu dài.
Bây giờ, hãy tạo một số hiệu ứng chuyển cảnh tuyệt vời!
Hy vọng bạn cũng hào hứng như tôi về hiện tại và tương lai của tính năng này. Nếu bạn có ý kiến phản hồi hoặc chỉ muốn khoe một số hiệu ứng chuyển đổi thành phần hiển thị mà bạn đã tạo, cho dù đó là hiệu ứng mượt mà và hữu ích hay chỉ là hiệu ứng đơn thuần ngớ ngẩn, vui lòng liên hệ với tôi trên Twitter hoặc Mastodon!