最近，WordPress 核心性能团队推出了一款新插件：View Transitions（视图转换）。这款实验性插件将跨文档视图转换浏览器 API的强大功能引入 WordPress 网站，让页面导航之间的过渡效果更加流畅、生动。
什么是视图转换？
传统上，在网络上从一个页面（或者严格来说，URL）切换到另一个页面总是会经历一次突然的“硬”重新加载。虽然对于我们许多网民来说，这似乎很正常，但在过去（近）二十年里，用户的期望发生了巨大的变化。
原生移动应用凭借其无缝的应用内导航和流畅的过渡效果，为用户体验树立了新的标杆。这促使 Web 开发者们努力追赶这种体验，并经常转向单页应用 (SPA)。虽然 SPA 旨在通过动态更新内容而无需重新加载整个页面来模拟原生应用的导航，但这通常会增加开发复杂性，并改变整个网站的架构，而这往往是以牺牲可访问性或性能为代价的。
现在，借助跨文档视图过渡功能，您可以通过流畅的网页过渡实现理想的用户体验，而无需对网站进行任何大规模改造。全新的View Transitions插件让 WordPress 中的操作变得非常简单。
WordPress 中的视图转换如何工作？
在 WordPress 网站上激活该插件并在网站的多个页面之间导航后，您会注意到该插件实现了柔和的淡入淡出过渡效果，从而营造出更加优雅、更具视觉吸引力的用户体验。这不仅是该插件的默认行为，也是浏览器中 View Transitions API 的默认行为。
由于过渡效果的性质和样式很大程度上取决于主题的具体布局和设计，因此我们的长期愿景是让主题能够选择并自定义此行为。这可以通过 WordPress 主题支持 API 来实现，例如通过调用add_theme_support( 'view-transitions' )。
目前，由于此插件的明确目的是启用和展示视图转换，因此它会自动在您的网站上启用它们，而不管当前使用的主题是什么。
自定义视图转换
在初始实验阶段，该插件提供了一种用户友好的方式，可以直接在 WordPress 管理员中探索不同的配置。您可以在“设置”>“阅读”下找到设置，这些设置允许您调整视图过渡行为。此 UI 主要用于在早期阶段轻松探索和测试。如果视图过渡功能最终进入核心功能，则自定义将仅通过主题支持 API 通过代码进行管理。也就是说，即使是这个早期版本的插件，主题也已经可以开始使用主题支持 API。
通过 add_theme_support()自定义
要使用标准设置快速启用视图转换，请将以下内容添加到主题functions.php文件中（通常在after_setup_theme操作挂钩内）：
function mytheme_setup() {
add_theme_support( 'view-transitions' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );为了更好地控制，你可以将参数数组传递给add_theme_support( 'view-transitions', $args )。以下是可用的参数：
default-animation：指定过渡的默认动画样式。post-selector：CSS 选择器用于识别单个帖子容器，对于从存档/列表页面应用特定于帖子的转换至关重要。global-transition-names：定义全局元素（如标题或侧边栏）的 CSS 选择器的映射（关联数组）及其视图转换名称，这些名称应view-transition-name在整个站点上具有持久值。post-transition-names：一个映射（关联数组），定义帖子容器内的元素（如标题或特色图片）的 CSS 选择器及其视图转换名称，这些名称应在转换到/从单个视图时进行动画处理。
为了进一步说明视图过渡名称的用途：当用户在两个 URL 之间导航时，同一个元素被赋予了相同的视图过渡名称时，该名称会随着过渡而轻微变化，从而保持清晰的关联。例如，当导航到单个帖子 URL 时，归档中帖子网格中的帖子标题可能会放大并移动到页面顶部。
对于default-animation，默认情况下有一些动画可用。此外，该插件提供了一个 API 来注册其他动画，每个动画都包含一个唯一标识符、一些配置值、一个 CSS 样式表和可选的别名。由于这是一个更高级的集成，我暂时不打算在这里介绍这一点，但理想情况下，从长远来看，应该会有插件或主题注册自己的视图过渡动画，供主题使用。目前，一些基本的动画是开箱即用的，主要作为示例。初始支持的标识符（及其别名）如下：
fadeslideslide-from-rightslide-from-bottomslide-from-leftslide-from-top
swipeswipe-from-rightswipe-from-bottomswipe-from-leftswipe-from-top
wipewipe-from-rightwipe-from-bottomwipe-from-leftwipe-from-top
你可以通过向 传递数组来自定义任何或所有支持的参数add_theme_support()。以下是修改所有可用选项的示例：
function mytheme_custom_view_transitions_setup() {
add_theme_support( 'view-transitions', array(
'default-animation' => 'wipe-from-right',
'post-selector' => '.wp-block-post.post, article.post, article.entry',
'global-transition-names' => array(
'.site-branding' => 'logo',
'.site-header' => 'header',
),
'post-transition-names' => array(
// These are mostly just the defaults, but there's one extra entry.
'.wp-block-post-title, .entry-title' => 'post-title',
'.wp-post-image' => 'post-thumbnail',
'.wp-block-post-content, .entry-content' => 'post-content',
'.post-meta' => 'post-meta', // Additional entry.
),
) );
}
add_action( 'after_setup_theme', 'mytheme_custom_view_transitions_setup' );正如您在示例中看到的，其中也展示了一些默认值，它们旨在捕捉跨块主题和经典主题的通用模式。也就是说，由于块主题仅使用块元素，因此它们在标记中具有更可预测的特性，因此很可能非常适合视图转换。
所有受支持参数的默认值部分基于 WordPress 生成的类（这些类几乎总是包含在 WordPress 网站中），部分基于非常常见的约定。目标是使默认值能够很好地适用于大多数 WordPress 网站。即便如此，我们不可能让其在所有 WordPress 主题中都完美呈现。这正是我们选择主题支持方式来在 WordPress 中提供视图过渡效果的原因。
通过“设置”>“阅读”进行自定义
可通过“设置”>“阅读”下的“查看转换”设置部分提供有限的 add_theme_support 自定义功能子集。
您可以自定义默认动画，以及全局元素和特定于文章的元素的默认视图过渡名称的选择器。虽然这意味着通过 UI 进行的自定义选项有限，但您仍然可以通过 UI 尝试不同的配置，并且对于大多数网站来说，这些参数很可能是最需要自定义的参数。请记住，此 UI 仅作为补充，其存在只是为了方便在插件中进行探索。推荐的自定义方式是通过add_theme_support您网站的 WordPress 主题进行。
关于配置优先级的说明
需要注意的是，目前，您通过“设置”UI 进行的任何配置都将优先于主题代码中使用 add_theme_support()定义的配置。在测试和探索插件时，请务必牢记这一点。
浏览器支持
目前，包括 Chrome、Edge 和 Safari 在内的一系列现代浏览器都支持跨文档视图过渡。对于使用尚不支持此 API 的浏览器的用户，应该不会有任何不良影响；他们只会体验到传统的页面间硬过渡。您可以随时访问caniuse.com查看最新的浏览器兼容性信息。
期待您的反馈！
如果您是 WordPress 主题开发者或维护者，我强烈建议您安装View Transitions 插件并试用。更好的是，您可以尝试使用 add_theme_support( 'view-transitions' )直接在主题中添加支持。
如果您只是对这个功能感兴趣，并想在您的 WordPress 网站上启用它，我同样鼓励您尝试一下这个插件。核心性能团队非常期待您的反馈。
虽然这是一个全新的第一个版本并且仍处于实验阶段，但与性能实验室计划中孵化的其他插件一样，它有潜力在未来成为 WordPress 内核 的一部分。
您的早期反馈和实际用例对于完善此功能、解决潜在问题和塑造其未来绝对有帮助。
