View Transition

Bạn đang xem tài liệu Inertia.js v2. Inertia.js v3 đã được phát hành và hiện là phiên bản mặc định. Hãy xem hướng dẫn nâng cấp để bắt đầu.

v2.2.13+ Inertia hỗ trợ View Transitions API, cho phép tạo animation khi chuyển trang. View Transitions API là tính năng trình duyệt tương đối mới. Với trình duyệt không hỗ trợ API này, Inertia tự động fallback về chuyển trang tiêu chuẩn một cách an toàn.

Bật transition

Bạn có thể bật view transition cho một visit bằng cách đặt tùy chọn viewTransition thành true. Mặc định, một hiệu ứng cross-fade sẽ được áp dụng giữa các trang.

import { router } from '@inertiajs/vue3'

router.visit('/another-page', { viewTransition: true })

import { router } from '@inertiajs/react'

router.visit('/another-page', { viewTransition: true })

import { router } from '@inertiajs/svelte'

router.visit('/another-page', { viewTransition: true })

Callback transition

Bạn cũng có thể truyền callback vào tùy chọn viewTransition; callback nhận instance ViewTransition tiêu chuẩn do trình duyệt cung cấp. Điều này cho phép bạn hook vào các promise khác nhau của API.

import { router } from '@inertiajs/vue3'

router.visit('/another-page', {
    viewTransition: (transition) => {
        transition.ready.then(() => console.log('Transition ready'))
        transition.updateCallbackDone.then(() => console.log('DOM updated'))
        transition.finished.then(() => console.log('Transition finished'))
    },
})

import { router } from '@inertiajs/react'

router.visit('/another-page', {
    viewTransition: (transition) => {
        transition.ready.then(() => console.log('Transition ready'))
        transition.updateCallbackDone.then(() => console.log('DOM updated'))
        transition.finished.then(() => console.log('Transition finished'))
    },
})

import { router } from '@inertiajs/svelte'

router.visit('/another-page', {
    viewTransition: (transition) => {
        transition.ready.then(() => console.log('Transition ready'))
        transition.updateCallbackDone.then(() => console.log('DOM updated'))
        transition.finished.then(() => console.log('Transition finished'))
    },
})

Liên kết

Tùy chọn viewTransition cũng có trên component Link.

import { Link } from '@inertiajs/vue3'

<Link href="/another-page" view-transition>Navigate</Link>

import { Link } from '@inertiajs/react'

<Link href="/another-page" viewTransition>Navigate</Link>

import { Link } from '@inertiajs/svelte'

<Link href="/another-page" viewTransition>Navigate</Link>

Bạn cũng có thể truyền callback để truy cập instance ViewTransition.

import { Link } from '@inertiajs/vue3'

<Link
    href="/another-page"
    :view-transition="(transition) => transition.finished.then(() => console.log('Done'))"
>
    Navigate
</Link>

import { Link } from '@inertiajs/react'

<Link
    href="/another-page"
    viewTransition={(transition) => transition.finished.then(() => console.log('Done'))}
>
    Navigate
</Link>

import { Link } from '@inertiajs/svelte'

<Link
    href="/another-page"
    viewTransition={(transition) => transition.finished.then(() => console.log('Done'))}
>
    Navigate
</Link>

Cấu hình toàn cục

Bạn có thể bật view transition toàn cục cho mọi visit bằng cách cấu hình callback visitOptions khi khởi tạo ứng dụng Inertia.

import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
    // ...
    defaults: {
        visitOptions: (href, options) => {
            return { viewTransition: true }
        },
    },
})

import { createInertiaApp } from '@inertiajs/react'

createInertiaApp({
    // ...
    defaults: {
        visitOptions: (href, options) => {
            return { viewTransition: true }
        },
    },
})

import { createInertiaApp } from '@inertiajs/svelte'

createInertiaApp({
    // ...
    defaults: {
        visitOptions: (href, options) => {
            return { viewTransition: true }
        },
    },
})

Tùy chỉnh transition

Bạn có thể tùy chỉnh animation chuyển trang bằng CSS. View Transitions API sử dụng một số pseudo-element mà bạn có thể target bằng CSS để tạo animation riêng. Các ví dụ sau được lấy từ tài liệu Chrome.

@keyframes fade-in {
    from { opacity: 0; }
}
@keyframes fade-out {
    to { opacity: 0; }
}
@keyframes slide-from-right {
    from { transform: translateX(30px); }
}
@keyframes slide-to-left {
    to { transform: translateX(-30px); }
}
::view-transition-old(root) {
    animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(root) {
    animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

Bạn cũng có thể animate từng element riêng lẻ giữa các trang bằng cách gán view-transition-name duy nhất. Ví dụ, bạn có thể animate avatar từ kích thước lớn trên trang profile xuống kích thước nhỏ trên dashboard.

<!-- Profile.vue -->
<template>
    <img src="/avatar.jpg" alt="User" class="avatar-large" />
</template>

<style>
.avatar-large {
    view-transition-name: user-avatar;
    width: auto;
    height: 200px;
}
</style>

<!-- Dashboard.vue -->
<template>
    <img src="/avatar.jpg" alt="User" class="avatar-small" />
</template>

<style>
.avatar-small {
    view-transition-name: user-avatar;
    width: auto;
    height: 40px;
}
</style>

// Profile.jsx
export default function Profile() {
    return <img src="/avatar.jpg" alt="User" className="avatar-large" />
}

// CSS
.avatar-large {
    view-transition-name: user-avatar;
    width: auto;
    height: 200px;
}

// Dashboard.jsx
export default function Dashboard() {
    return <img src="/avatar.jpg" alt="User" className="avatar-small" />
}

// CSS
.avatar-small {
    view-transition-name: user-avatar;
    width: auto;
    height: 40px;
}

<!-- Profile.svelte -->
<img src="/avatar.jpg" alt="User" class="avatar-large" />

<style>
.avatar-large {
    view-transition-name: user-avatar;
    width: auto;
    height: 200px;
}
</style>

<!-- Dashboard.svelte -->
<img src="/avatar.jpg" alt="User" class="avatar-small" />

<style>
.avatar-small {
    view-transition-name: user-avatar;
    width: auto;
    height: 40px;
}
</style>

Bạn có thể tùy chỉnh view transition theo ý muốn bằng bất kỳ CSS animation nào. Để biết thêm, hãy xem tài liệu View Transitions API.

Tài liệu chính thức

Bài dịch này được đối chiếu từ tài liệu Inertia.js v2 chính thức. Nếu có khác biệt do phiên bản hoặc cập nhật mới, hãy ưu tiên tài liệu chính thức làm nguồn tham chiếu.

Bắt đầu

Cài đặt

Khái niệm cốt lõi

Kiến thức cơ bản

Dữ liệu & Props

Bảo mật

Nâng cao

Bật transition

Callback transition

Liên kết

Cấu hình toàn cục

Tùy chỉnh transition

Tài liệu chính thức

​Bật transition

​Callback transition

​Liên kết

​Cấu hình toàn cục

​Tùy chỉnh transition

​Tài liệu chính thức

Bật transition

Callback transition

Liên kết

Cấu hình toàn cục

Tùy chỉnh transition

Tài liệu chính thức