Hôm nay, chúng tôi muốn chia sẻ thêm về hành trình của Chrome và Astro với API Chuyển đổi chế độ xem. Điều này bao gồm cả cách cộng đồng Astro đón nhận và thử nghiệm API sớm, làm nổi bật các khả năng cho cộng đồng rộng lớn hơn. Chúng tôi cũng rất vui được chia sẻ thêm về tính năng hỗ trợ tích hợp mới cho Chuyển đổi khung hiển thị trong Astro 3.0!
Thông tin khái quát
Việc chuyển đổi liền mạch giữa các trạng thái của một trang (còn gọi là chuyển đổi trạng thái) luôn là một khía cạnh phức tạp trong việc tạo trải nghiệm liền mạch, có ảnh động trên web. Mặc dù có các công cụ như hiệu ứng chuyển đổi CSS, ảnh động CSS và API Ảnh động trên web, nhưng việc tạo hiệu ứng chuyển đổi trạng thái vẫn là một nhiệm vụ khó khăn. Một trong những thách thức là xử lý hoạt động tương tác trên các phần tử gửi đi, điều này có thể khiến quá trình chuyển đổi trở nên phức tạp hơn.
Ngoài ra, việc duy trì vị trí đọc và tiêu điểm cho các thiết bị hỗ trợ cũng rất khó khăn. Ngoài ra, việc xử lý sự khác biệt về vị trí cuộn khiến quá trình chuyển đổi trạng thái trở nên rườm rà. Tất cả những yếu tố này đều góp phần làm phức tạp việc triển khai hiệu ứng chuyển đổi mượt mà giữa các thành phần trên trang web
View Transitions API (API Chuyển đổi khung hiển thị) đã ra đời như một giải pháp của trình duyệt cho những thách thức này. API mới này cung cấp một cách dễ dàng hơn để thay đổi DOM trong một bước duy nhất, đồng thời tạo hiệu ứng chuyển đổi ảnh động giữa hai trạng thái.
Việc ra mắt View Transitions API trong Chrome 111 đánh dấu sự khởi đầu của một tầm nhìn rộng lớn hơn về việc hỗ trợ chuyển đổi cho tất cả các trang web, chứ không chỉ các ứng dụng web dựa trên JavaScript. Chúng tôi cũng đang cải tiến tính năng này trong tương lai. Trong tương lai, Chrome có thể khám phá các tính năng bổ sung thú vị như hiệu ứng chuyển đổi giữa các tài liệu, ảnh động do trình kết hợp điều khiển, hiệu ứng chuyển đổi trong phạm vi và nhóm hiệu ứng chuyển đổi lồng nhau.
Truy cập vào bản minh hoạ: Trực tiếp, Nguồn
Khám phá sớm với hiệu ứng chuyển đổi khung hiển thị
Hành trình của Chrome với API Chuyển đổi khung hiển thị không phải là hành trình đơn độc. Ý kiến phản hồi và sự cộng tác của các nhà phát triển, tác giả khung và Nhóm làm việc về CSS đều đóng vai trò quan trọng trong việc định hình tính năng này trong nhiều năm.
Ngay từ đầu, hoạt động thử nghiệm của nhà phát triển đã đóng vai trò quan trọng. Các phiên bản API đầu tiên không hỗ trợ ảnh động CSS và các hiệu ứng chuyển đổi bị giới hạn ở một số chế độ cài đặt trước hạn chế. Ý kiến phản hồi ban đầu cho thấy rõ rằng nhà phát triển muốn các hiệu ứng chuyển đổi có thể tuỳ chỉnh và thể hiện được cảm xúc. Quá trình cộng tác qua lại này đảm bảo rằng API được thiết kế cân bằng giữa các giá trị mặc định, khả năng mở rộng và tuỳ chỉnh tốt.
Astro là một trong những khung đó đã sớm sử dụng tính năng Chuyển đổi thành phần hiển thị. Phần còn lại của bài viết này là từ quan điểm của nhóm Astro, đồng thời chia sẻ kinh nghiệm của họ về việc tìm kiếm, áp dụng và đưa tính năng Chuyển đổi thành phần hiển thị vào trải nghiệm phát triển web.
Lý do Astro đặt cược vào hiệu ứng chuyển đổi khung hiển thị
Astro đã tìm kiếm một tính năng như Chuyển đổi khung hiển thị trong một thời gian dài. Astro là một khung web JavaScript kết xuất các thành phần giao diện người dùng của bạn thành HTML nhẹ trên máy chủ để tăng hiệu suất tải trang. Astro cố ý di chuyển nhiều công việc nhất có thể khỏi thiết bị khách. Các trang web Astro sử dụng tính năng điều hướng trang trình duyệt gốc, trong đó các khung web khác có thể xâm nhập vào tính năng điều hướng trình duyệt bằng tính năng định tuyến phía máy khách JavaScript.
Sự đánh đổi này đã tạo ra một thách thức cho nhóm Astro: Làm cách nào để Astro tạo ảnh động cho các lượt chuyển đổi trang và cung cấp giao diện người dùng ổn định giống như ứng dụng trên các trang mà không cần sử dụng tính năng định tuyến phía máy khách?
Câu trả lời là Chuyển đổi thành phần hiển thị. Với tính năng Chuyển đổi khung hiển thị, Astro có thể cung cấp các tính năng định tuyến giống như các khung web SPA nặng về JavaScript, nhưng không có hiệu suất và chi phí phức tạp của tính năng định tuyến phía máy khách. Các khung khác coi Chuyển đổi thành phần hiển thị là một chi tiết triển khai không bắt buộc, nhưng đối với Astro, đó là một điều gì đó lớn hơn nhiều.
Câu hỏi tiếp theo mà nhóm Astro phải trả lời là "làm cách nào?" Nhóm đã tìm đến các dự án như Turbo, Swup và Livewire để lấy cảm hứng và thậm chí đã tạo nguyên mẫu cho một số phương pháp tương tự bên trong Astro.
Một trong những nỗ lực sớm nhất liên quan đến "quá trình chuyển đổi thông minh" toàn trang sẽ tự động so sánh mọi trang HTML mới với HTML hiện tại, sau đó cố gắng thay thế mọi phần tử cùng một lúc bằng JavaScript. Cách này rất thông minh nhưng dễ xảy ra lỗi.
// An early API design for enabling view transitions
// in Astro via top-level config. Never implemented.
export default defineConfig({
router: 'spa'
})
Rất may, cộng đồng Astro đã cho thấy rằng View Transitions API đã rất mạnh mẽ mà không làm cho sản phẩm trở nên quá phức tạp. Sau khi xem một số bản minh hoạ ban đầu, nhóm Astro đã bị thuyết phục bởi ý tưởng về một API Astro đơn giản có thể khớp với các API trình duyệt gần nhất có thể. Thay vì xem Chuyển đổi thành phần hiển thị là một chi tiết triển khai không hiển thị ẩn bên trong Astro, nhà phát triển có thể trực tiếp xem các chuyển đổi này. Điều chỉnh Astro trực tiếp với nền tảng web và giảm độ phức tạp tổng thể trên giao diện người dùng.
---
// Add a simple fade transition with 2 lines of code!
// 1. Import the <ViewTransitions> component
// 2. Add it to your common/base head component, or individual pages.
import { ViewTransitions } from 'astro:transitions';
---
<head>
<title>My View Transitions Demo</title>
<ViewTransitions />
</head>
<!-- ... -->
Công việc trở nên đơn giản: đưa API Chuyển đổi thành phần hiển thị mới vào Astro và cung cấp các phương án dự phòng tự động cho nhiều trang web và trình duyệt nhất có thể. Hỗ trợ dự phòng là điều cần thiết vì hầu hết các trình duyệt (ngoài Chrome) chưa hỗ trợ đầy đủ cho tính năng Chuyển đổi khung hiển thị gốc.
Ra mắt dịch vụ hỗ trợ chính thức trong Astro
Astro đã phát hành tính năng hỗ trợ thử nghiệm Chuyển đổi chế độ xem trong Astro 2.9. Chúng tôi đã nhận được phản hồi tích cực ngay lập tức. Các nhà phát triển bắt đầu chia sẻ các bản minh hoạ tuyệt vời về nhiều trường hợp sử dụng khác nhau, và trong một số trường hợp, thậm chí còn chuyển tất cả các bản minh hoạ đó sang phiên bản chính thức.
Truy cập vào bản minh hoạ: Trực tiếp, Nguồn
Astro 3.0, hoàn tất việc hỗ trợ và bỏ gắn cờ API Chuyển đổi chế độ xem mới cho mọi người. Các API mới này hiện đã sẵn sàng để bạn áp dụng theo phương thức thử nghiệm hoặc cùng một lúc.
<main transition:animate="slide">
<p>Slide animation as you navigate to and from the page!</p>
</main>
<aside transition:name="my-aside">
<p>Animate and morph the matching "my-aside" element across pages automatically!</p>
</aside>
Một lợi ích không mong muốn khi điều chỉnh Astro với các API nền tảng là khả năng thử nghiệm việc xây dựng các tính năng mới dựa trên API Chuyển đổi thành phần hiển thị gốc. Ví dụ: lệnh transition:persist Astro mới cho phép mọi phần tử tự duy trì trên một thành phần điều hướng toàn trang. Điều này hỗ trợ các phần tử tồn tại lâu dài như trình phát âm thanh và video liên tục, một tính năng trước đây chỉ có thể thực hiện được trong các SPA JavaScript nặng.
<video controls="" autoplay="" transition:persist>
<source src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4" type="video/mp4">
</video>
Truy cập vào bản minh hoạ: Trực tiếp, Nguồn
Astro cũng có thể tự do điều chỉnh Hiệu ứng chuyển đổi khung hiển thị sao cho phù hợp hơn với nhà phát triển. Ví dụ: nhóm đã thêm tính năng hỗ trợ cho ảnh động tuỳ chỉnh tiến/lùi và ảnh động cho HTML động. Cả hai tính năng này đều khó thực hiện chỉ bằng các API cấp thấp, nhưng trong Astro, bạn có thể thực hiện dễ dàng.
Hiện tại, các tính năng này chỉ có trong Astro, nhưng nhóm Astro hy vọng có thể chia sẻ kinh nghiệm của họ với các tác giả quy cách và nhóm làm việc để có thể cải tiến trình duyệt trong tương lai. Ví dụ: bằng cách theo dõi chặt chẽ một đề xuất để dễ dàng chia sẻ ảnh động trong CSS.
Tiếp theo là gì?
Tương lai của tính năng Chuyển đổi thành phần hiển thị trên web rất tươi sáng. Astro, Nuxt và HTMX đều đã hỗ trợ ở một mức độ nào đó và nhiều nền tảng khác cũng đã bày tỏ sự quan tâm.
Nhóm Chrome rất vui mừng về việc Astro hỗ trợ tính năng Chuyển đổi chế độ xem gốc. Đây là một bước tiến lớn trong quá trình phát triển web, giúp mang lại trải nghiệm linh hoạt và sống động hơn cho người dùng. Các nhà phát triển nên tìm hiểu kỹ về tính năng Chuyển đổi khung hiển thị trong Astro 3.0. Cho dù bạn đang tạo trang đích mới hay nâng cấp trang web hiện có, những tính năng nâng cao này đều có thể thay đổi cục diện. Chuyển đổi khung hiển thị đã giúp lấp đầy khoảng trống giữa những gì có thể làm được với SPA và MPA. Chrome rất mong nhận được ý kiến phản hồi của bạn về việc liệu có thiếu sót nào khác trong việc hỗ trợ SPA và/hoặc MPA hay không. Bạn có thể bình luận trên Kho lưu trữ GitHub của WICG về hiệu ứng chuyển đổi khung hiển thị để thảo luận thêm về vấn đề này.
Chúng tôi đã được truyền cảm hứng từ các bản minh hoạ và ứng dụng sáng tạo mà chúng tôi đã thấy, và chúng tôi rất mong được thấy nhiều ứng dụng hơn nữa. Công việc của bạn với tính năng Chuyển đổi khung hiển thị đang định hình tương lai của web. Hãy thử tính năng Chuyển đổi khung hiển thị trong Astro, chia sẻ công việc của bạn và cùng tiếp tục hành trình này.