Document: startViewTransition() method

Cú pháp

startViewTransition()
startViewTransition(updateCallback)
startViewTransition(options)

Tham số

updateCallback Optional

Một callback tùy chọn thường được gọi để cập nhật DOM trong quá trình chuyển đổi khung nhìn SPA, trả về một Promise. Callback được gọi khi API đã chụp ảnh nhanh trang hiện tại. Khi promise do callback trả về được thỏa mãn, chuyển đổi khung nhìn bắt đầu trong khung hình tiếp theo. Nếu promise do callback trả về bị từ chối, quá trình chuyển đổi bị hủy bỏ.

options Optional

Một đối tượng chứa các tùy chọn để cấu hình chuyển đổi khung nhìn. Nó có thể bao gồm các thuộc tính sau:

update Optional

Hàm updateCallback giống như mô tả ở trên. Mặc định là null.

types Optional

Một mảng các chuỗi đại diện cho các loại được áp dụng cho chuyển đổi khung nhìn. Các loại chuyển đổi khung nhìn cho phép áp dụng có chọn lọc các kiểu CSS hoặc logic JavaScript dựa trên loại chuyển đổi đang xảy ra. Mặc định là một chuỗi rỗng.

Giá trị trả về

Một đối tượng ViewTransition.

Ví dụ

Xem View transition API > Ví dụ để biết danh sách các ví dụ đầy đủ.

Sử dụng cơ bản

Trong chuyển đổi khung nhìn cùng tài liệu này, chúng ta kiểm tra xem trình duyệt có hỗ trợ chuyển đổi khung nhìn không. Nếu không hỗ trợ, chúng ta đặt màu nền bằng phương pháp dự phòng được áp dụng ngay lập tức. Ngược lại, chúng ta có thể gọi document.startViewTransition() một cách an toàn với các quy tắc animation mà chúng ta định nghĩa trong CSS.

<main>
  <section></section>
  <button id="change-color">Change color</button>
</main>

Chúng ta đang đặt animation-duration là 2 giây bằng cách sử dụng phần tử giả ::view-transition-group.

html {
  --bg: indigo;
}
main {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
section {
  background-color: var(--bg);
  height: 60px;
  border-radius: 5px;
}
::view-transition-group(root) {
  animation-duration: 2s;
}

const colors = ["darkred", "darkslateblue", "darkgreen"];
const colBlock = document.querySelector("section");
let count = 0;
const updateColor = () => {
  colBlock.style = `--bg: ${colors[count]}`;
  count = count !== colors.length - 1 ? ++count : 0;
};
const changeColor = () => {
  // Dự phòng cho trình duyệt không hỗ trợ View Transitions:
  if (!document.startViewTransition) {
    updateColor();
    return;
  }

  // Với View Transitions:
  const transition = document.startViewTransition(() => {
    updateColor();
  });
};
const changeColorButton = document.querySelector("#change-color");
changeColorButton.addEventListener("click", changeColor);
changeColorButton.addEventListener("keypress", changeColor);

Nếu chuyển đổi khung nhìn được hỗ trợ, nhấp vào nút sẽ chuyển đổi màu từ màu này sang màu khác trong 2 giây. Ngược lại, màu nền được đặt bằng phương pháp dự phòng, không có animation.

Đặc tả kỹ thuật

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

Xem thêm

• Document.activeViewTransition
• Lớp giả :active-view-transition
• Lớp giả :active-view-transition-type()
• View Transition API
• Sử dụng View Transition API
• Sử dụng các loại chuyển đổi khung nhìn
• Smooth transitions with the View Transition API