Tích hợp View Transitions API vào Astro: Mượt mà không cần SPA
Làm thế nào để website nhiều trang (MPA) có hiệu ứng chuyển cảnh mượt như App mà không cần hy sinh SEO hay cài thêm thư viện JS nặng nề?
Lê Thanh Tùng Nguồn
Một trong những lý do lớn nhất khiến developers chọn Next.js hay Nuxt.js thay vì các giải pháp đơn giản hơn là cảm giác “App-like”. Khi bấm chuyển trang, không ai muốn nhìn thấy màn hình trắng xoá nháy lên một cái cả.
Trước đây, để làm điều này với Web tĩnh (MPA), chúng ta phải dùng Barba.js hoặc Turbolinks, cấu hình khá phức tạp và dễ xung đột script. Nhưng với bản cập nhật Astro 3.0, mọi thứ đã thay đổi nhờ View Transitions API.
Tại sao nó lại là “Game Changer”?
View Transitions API là một chuẩn web mới, cho phép trình duyệt tự xử lý việc thay đổi DOM giữa 2 trạng thái. Astro đã tích hợp sẵn cái này. Bạn chỉ cần bật nó lên, Astro sẽ chặn việc load trang truyền thống, fetch nội dung trang mới về, và yêu cầu trình duyệt “biến hình” trang cũ thành trang mới.
Kết quả là bạn giữ được tốc độ tải trang thần sầu của HTML tĩnh, nhưng lại có trải nghiệm mượt mà của Single Page App.
Cách thực hiện
Trong file Layout chính của dự án (thường là src/layouts/Layout.astro), bạn import component <ViewTransitions /> và đặt nó vào trong thẻ <head>.
---
import { ViewTransitions } from 'astro:transitions';
---
<head>
<title>My Blog</title>
<ViewTransitions />
</head>Chỉ cần vậy thôi là toàn bộ website của bạn đã có hiệu ứng Fade-in/Fade-out khi chuyển trang.
Nâng cao: Hiệu ứng Morphing (Biến hình)
Nếu bạn muốn ảnh bìa bài viết ở trang chủ “bay” lên và phóng to ra khi vào trang chi tiết, bạn cần định danh cho 2 bức ảnh đó là một cặp.
Dùng thuộc tính transition:name (hoặc style view-transition-name).
Trang chủ (Card):
<img src="post-1.jpg" style="view-transition-name: img-post-1" />Trang chi tiết (Detail):
<img src="post-1.jpg" style="view-transition-name: img-post-1" />Trình duyệt sẽ tự lo phần còn lại. Nó sẽ tính toán vị trí, kích thước và tạo animation chuyển đổi giữa 2 trạng thái này.
Vấn đề cần lưu ý: Script
Vì trang không còn reload thật sự (full page reload), các đoạn script chạy trong sự kiện DOMContentLoaded sẽ chỉ chạy một lần duy nhất khi bạn vào web. Khi chuyển trang, nó không chạy lại.
Bạn cần sửa lại code JavaScript cũ của mình. Thay vì DOMContentLoaded, hãy lắng nghe sự kiện astro:page-load.
// Cũ - Sẽ lỗi khi chuyển trang
document.addEventListener('DOMContentLoaded', () => {
initMenu();
});
// Mới - Chạy lại mỗi khi vào trang mới
document.addEventListener('astro:page-load', () => {
initMenu();
});Chỉ với vài thay đổi nhỏ, website của bạn sẽ chuyên nghiệp hơn hẳn. Đây là tính năng tôi luôn bật đầu tiên mỗi khi khởi tạo dự án Astro mới.
Component nào cần import để bật View Transitions trong Astro?
Thử Thách Kiến Thức Lịch Sử?
Khám phá hàng trăm câu hỏi trắc nghiệm lịch sử thú vị tại HistoQuiz. Vừa học vừa chơi, nâng cao kiến thức ngay hôm nay!
Google Chrome Developers
Nhà xuất bản gốcBài viết này được trích dẫn và tổng hợp từ Google Chrome Developers, nơi cung cấp các bài viết và tài liệu chất lượng cao.