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