视图过渡名称

CSS view-transition-name 属性唯一地标识可用于视图过渡的元素。

card {
  view-transition-name: card-transition;
}

我们为元素命名（即 <custom-ident>），然后引用该名称或将该属性设置为 none 以将元素排除在视图过渡之外。

该规范尚未成为标准，但它将 view-transition-name 描述为一种“标记单独过渡的子树”的方式，这是一种非常花哨的说法，意思是我们要捕获某个元素以进行视图过渡。 当我们为元素赋予 view-transition-name 时，实际上是在为它提供一组用于创建视图过渡的伪元素。

语法

view-transition-name: none | <custom-ident>;

• 初始值： none
• 应用于：所有元素
• 继承：否
• 百分比：N/A
• 计算值：按指定
• 规范顺序：按语法
• 动画类型：离散

属性值和描述

/* <custom-ident> */
view-transition-name: banner;
view-transition-name: banner-transition;
view-transition-name: bannerTransition;

/* Keyword */
view-transition-name: none;

• <custom-ident>: 用于定义可以参与视图过渡的元素的唯一标识符，无论是“旧”元素还是“新”元素，都可以过渡到该元素。 我们不能使用 none 或 auto 作为值，因为它们是保留的全局关键字值。
• none: 使元素不参与视图过渡。

什么是“捕获的元素”？

了解这一点很重要，因为这正是规范中对声明了 view-transition-name 的元素的描述。 视图过渡的基本思想是，我们“捕获”现有状态作为图像，并在该快照和新元素之间进行过渡。

当我们“捕获”元素时，我们就是在视图过渡的生命周期内跟踪它，在此期间，元素会呈现多种形式。 以下是捕获元素遵循的过程，如规范所述，它进一步将捕获的元素称为“结构”或一组项目

• 旧图像：2D 位图或 null。 最初为 null。
• 旧宽度 / 旧高度：一个 unrestricted double，最初为零。
• 旧 transform: 一个 <transform-function>，最初为恒等变换函数。
• 旧 writing-mode: Null 或一个 writing-mode，最初为 null。
• 旧 direction: Null 或一个 direction，最初为 null。
• 旧 text-orientation: Null 或一个 text-orientation，最初为 null。
• 旧 mix-blend-mode: Null 或一个 mix-blend-mode，最初为 null。
• 旧 backdrop-filter: Null 或一个 backdrop-filter，最初为 null。
• 旧 color-scheme: Null 或一个 color-scheme，最初为 null。
• 新元素: 一个 元素 或 null。 最初为 null。

这些都是视图过渡中使用的捕获元素的所有部分。 我们捕获有关元素当前（或“旧”）状态的一组信息，并将其过渡到一个新元素。

名称必须是唯一的

我们可以为视图过渡命名任何我们想要的东西（none 和 auto 是唯一的例外），但它必须是唯一的，这意味着它 **仅应用于当前页面上渲染的单个元素**。

这里的关键词是“渲染”，因为我们可以在技术上将相同的 view-transition-name 重新用于多个元素。 例如，您可能希望在同一组图像上应用相同的过渡，但不想为每个图像都进行命名。 相反，我们可以在某个类上声明 view-transition-name

.image-transition {
  view-transition-name: image-zoom;
}

然后，我们可以设置 JavaScript，为该组中的每个图像设置一个变量，将 .image-transition 类添加到图像，然后使用某个操作（例如点击处理程序）在图像上触发过渡。 然后，脚本等待过渡完成，然后删除 .image-transition 类，以便将其应用于另一个被点击的图像。

// Create a variable for img elements in a .gallery
const image = document.querySelectorAll(".gallery img");

// When an image is clicked...
image.onclick = () => {
  // If view transitions are *not* supported
  if (!document.startViewTransition) {
    // Run a fallback function
    doSomething(image);
  // If view transitions are supported
  } else {
    // Add the .image-transition class to the clicked image
    image.classList.add("image-transition");

    // Start the transition and save its instance in a variable
    const transition = document.startViewTransition(() => doSomething(image));

    // Wait for the transition to finish.
    await transition.finished;

    // Remove the class when finished
    image.classList.remove("image-transition");
  }
};

另一种方法是在被点击的图像上将 view-transition-name 设置为 <custom-ident>，等待过渡运行，然后将 <custom-ident> 替换为 none 值。

// Create a variable for img elements in a .gallery
const image = document.querySelectorAll(".gallery img");

// When an image is clicked...
image.onclick = () => {
  // First, check if view transitions are supported
  if (!document.startViewTransition) {
    // Fallback if View Transitions API is not supported.
    doSomething(image);
  } else {
    // Set `view-transition-name` with a <custom-ident>
    image.style.viewTransitionName = "image-zoom";

    // Start the transition and save its instance in a variable
    const transition = document.startViewTransition(() => doSomething(image));

    // Wait for the transition to finish.
    await transition.finished;

    // Set the transition name to `none` when finished
    image.style.viewTransitionName = "none";
  }
};

规范

view-transition-name 属性只是几个 view-* 属性之一，这些属性共同用于注册和管理作为 视图过渡模块级别 1 规范 部分的视图过渡，该规范目前是一个候选推荐快照，这意味着它可以在可用时使用，但正在收集反馈意见，然后再正式推荐。 换句话说，view-transition-name 及其相关属性仍处于实验阶段，尚未成为标准。

浏览器支持

目前仅限 Chrome 和其他基于 Chromium 的浏览器。 关注 Caniuse 页面，获取有关 view-transition-name 属性 和 none 值的支持 的最新支持信息。

就浏览器支持而言，我们可以使用 view-transition-name 属性来检查用户的浏览器是否支持视图过渡 API，并为不支持的浏览器提供备用方案。 我们可以使用 <custom-ident> 值来检查支持情况，但 none 值可能是更好的选择，因为它是一个一致的关键字，并且如果我们使用视图过渡，我们肯定希望该值得到支持。

/* If the View Transitions API is supported */
@supports (view-transition-name: none) {

}

/* If the View Transitions API is *not* supported */
@supports not (view-transition-name: none) {
  /* Use a simple CSS animation if possible */
}

类似地，我们也可以通过 JavaScript 检查支持情况

// If the View Transitions API is *not* supported.
if (!document.startViewTransition) {
  doSomething());

// Otherwise, start the view transition 
} else {
  document.startViewTransition(() => doSomething());
}

相关