@view-transition

Cú pháp

@view-transition {
  navigation: auto | none;
  types: none | <custom-ident>#;
}

Các bộ mô tả

navigation

Một từ khóa chỉ định hiệu ứng mà quy tắc at này sẽ có trên hành vi chuyển tiếp chế độ xem của tài liệu. Các giá trị có thể là:

auto

Tài liệu sẽ thực hiện chuyển tiếp chế độ xem khi tham gia điều hướng, miễn là điều hướng là cùng nguồn gốc (same-origin), không có chuyển hướng liên nguồn gốc, và navigationType của nó là traverse, push, hoặc replace. Trong trường hợp push hoặc replace, điều hướng phải được khởi tạo bởi người dùng tương tác với nội dung trang, không phải bởi tính năng giao diện người dùng của trình duyệt.

none

Tài liệu sẽ không thực hiện chuyển tiếp chế độ xem.

types

Chỉ định các loại chuyển tiếp chế độ xem để đặt trên chuyển tiếp chế độ xem hoạt động cho các tài liệu hiện tại và đích. Các giá trị có thể là:

<custom-ident>+

Một hoặc nhiều giá trị <custom-ident> được phân tách bởi khoảng trắng đại diện cho các loại cần đặt.

none

Không có loại nào được đặt.

Cú pháp chính thức

@view-transition = 
  @view-transition { <declaration-list> }  

Ví dụ

Chuyển tiếp chế độ xem trang

Các đoạn mã sau đây cho thấy các khái niệm chính được dùng trong demo chuyển tiếp trang. Demo dùng chuyển tiếp chế độ xem liên tài liệu; một chuyển tiếp nửa giây xảy ra khi điều hướng giữa hai trang của một trang web. Để xem demo đầy đủ, hãy xem View transitions multi-page app demo.

Quy tắc at @view-transition được chỉ định trong CSS cho cả tài liệu hiện tại và đích của điều hướng để đăng ký cả hai vào chuyển tiếp chế độ xem:

@view-transition {
  navigation: auto;
}

Ngoài quy tắc at @view-transition, chúng ta dùng quy tắc at @keyframes để định nghĩa hai hoạt ảnh khung chính và dùng thuộc tính tốc ký animation để áp dụng các hoạt ảnh khung chính đó cho các phần tử trong trang ra đi (::view-transition-old()) và trang đến (::view-transition-new()) mà chúng ta muốn tạo hoạt ảnh.

/* Create a custom animation */
@keyframes move-out {
  from {
    transform: translateY(0%);
  }

  to {
    transform: translateY(-100%);
  }
}

@keyframes move-in {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0%);
  }
}

/* Apply the custom animation to the old and new page states */
::view-transition-old(root) {
  animation: 0.4s ease-in both move-out;
}

::view-transition-new(root) {
  animation: 0.4s ease-in both move-in;
}

Xem demo trực tiếp transitions multi-page app.

Sử dụng các loại chuyển tiếp chế độ xem

Ví dụ về loại chuyển tiếp MPA (mã nguồn) minh họa cách dùng types qua @view-transition:

@view-transition {
  navigation: auto;
  types: slide;
}

Xem Sử dụng các loại với chuyển tiếp chế độ xem liên tài liệu qua @view-transition để biết hướng dẫn về ví dụ được tham chiếu.

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• ::view-transition
• ::view-transition-new()
• ::view-transition-old()
• ::view-transition-group()
• ::view-transition-image-pair()
• View Transition API
• Sử dụng các loại chuyển tiếp chế độ xem
• Các quy tắc at CSS
• Các hàm quy tắc at CSS