WordPress View Transitions 插件：实现流畅页面过渡的革命性工具

最近，WordPress 核心性能团队推出了一款创新插件：View Transitions（视图转换）。这款实验性插件将跨文档视图转换浏览器 API 的强大功能引入 WordPress 网站，让页面导航之间的过渡效果更加流畅、生动。

什么是视图转换？

传统上，在网络上从一个页面（或严格来说，从一个 URL）切换到另一个页面时，总会经历一次突然的"硬"重新加载。虽然这对许多网民来说似乎很正常，但在过去近二十年里，用户的期望已经发生了巨大变化。

原生移动应用 凭借其无缝的应用内导航和流畅的过渡效果，为用户体验树立了新的标杆。这促使 Web 开发者努力追赶这种体验，经常转向单页应用 (SPA)。虽然 SPA 旨在通过动态更新内容而无需重新加载整个页面来模拟原生应用的导航，但这通常会增加开发复杂性，并改变整个网站的架构——往往以牺牲可访问性或性能为代价。

现在，借助跨文档视图过渡功能，您可以通过流畅的网页过渡实现理想的用户体验，而无需对网站进行任何大规模改造。全新的 View Transitions 插件让 WordPress 中的操作变得非常简单。

View Transitions 的工作原理

在 WordPress 网站上激活该插件并在多个页面之间导航后，您会注意到插件实现了柔和的淡入淡出过渡效果，从而营造出更加优雅、更具视觉吸引力的用户体验。这不仅是该插件的默认行为，也是浏览器中 View Transitions API 的默认行为。

由于过渡效果的性质和样式很大程度上取决于主题的具体布局和设计，因此长期愿景是让主题能够选择并自定义此行为。这可以通过 WordPress 主题支持 API 实现，例如通过调用 <code>add_theme_support( 'view-transitions' )</code>。

目前，由于此插件的明确目的是启用和展示视图转换，因此它会自动在您的网站上启用它们，而不管当前使用的主题是什么。

自定义视图转换

在初始实验阶段，该插件提供了一种用户友好的方式，可以直接在 WordPress 管理员中探索不同的配置。

通过 add_theme_support() 自定义

要使用标准设置快速启用视图转换，将以下代码添加到主题的 <code>functions.php</code> 文件中：

function mytheme_setup() {
    add_theme_support( &#039;view-transitions&#039; );
}
add_action( &#039;after_setup_theme&#039;, &#039;mytheme_setup&#039; );

为了更好地控制，可以传递参数数组给 <code>add_theme_support( 'view-transitions', $args )</code>。以下是可用参数：

  • default-animation：指定过渡的默认动画样式
  • post-selector：用于识别单个帖子容器的 CSS 选择器
  • global-transition-names：定义全局元素（如标题或侧边栏）的 CSS 选择器映射
  • post-transition-names：定义帖子容器内元素的 CSS 选择器映射

目前支持的基础动画效果包括：

  • <code>fade</code>（淡入淡出）
  • <code>slide</code>（滑动）系列：<code>slide-from-right</code>、<code>slide-from-bottom</code> 等
  • <code>swipe</code>（轻扫）系列
  • <code>wipe</code>（擦除）系列

完整配置示例：

function mytheme_custom_view_transitions_setup() {
    add_theme_support( &#039;view-transitions&#039;, array(
        &#039;default-animation&#039; =&gt; &#039;wipe-from-right&#039;,
        &#039;post-selector&#039; =&gt; &#039;.wp-block-post.post, article.post, article.entry&#039;,
        &#039;global-transition-names&#039; =&gt; array(
            &#039;.site-branding&#039; =&gt; &#039;logo&#039;,
            &#039;.site-header&#039; =&gt; &#039;header&#039;,
        ),
        &#039;post-transition-names&#039; =&gt; array(
            &#039;.wp-block-post-title, .entry-title&#039; =&gt; &#039;post-title&#039;,
            &#039;.wp-post-image&#039; =&gt; &#039;post-thumbnail&#039;,
            &#039;.wp-block-post-content, .entry-content&#039; =&gt; &#039;post-content&#039;,
            &#039;.post-meta&#039; =&gt; &#039;post-meta&#039;,
        ),
    ) );
}
add_action( &#039;after_setup_theme&#039;, &#039;mytheme_custom_view_transitions_setup&#039; );

通过"设置">"阅读"进行自定义

可通过"设置">"阅读"下的"查看转换"设置部分提供有限的定制功能：

!placeholder-for-settings-interface.png

您可以自定义默认动画，以及全局元素和特定于文章的元素的默认视图过渡名称的选择器。需要注意的是，通过 UI 进行的任何配置将优先于主题代码中使用 add_theme_support() 定义的配置。

浏览器支持情况

目前，包括 Chrome、Edge 和 Safari 在内的一系列现代浏览器都支持跨文档视图过渡。对于使用尚不支持此 API 的浏览器的用户，应该不会有任何不良影响；他们只会体验到传统的页面间硬过渡。

根据提供的 https://caniuse.com 链接内容，虽然该页面主要列出了其他功能（如 WebP、CSS if() 函数等），但查看最新的浏览器兼容性信息时，可以确认 View Transitions API 在现代浏览器中已获得良好支持。

参与反馈与未来展望

如果您是 WordPress 主题开发者或维护者，强烈建议安装 View Transitions 插件 并试用。更好的是，可以尝试使用 <code>add_theme_support( 'view-transitions' )</code> 直接在主题中添加支持。

如果您只是对这个功能感兴趣，并想在 WordPress 网站上启用它，同样鼓励尝试这个插件。核心性能团队非常期待您的反馈。

虽然这是一个全新的第一个版本并且仍处于实验阶段，但与性能实验室计划中孵化的其他插件一样，它有潜力在未来成为 WordPress 核心功能 的一部分。

您的早期反馈和实际用例对于完善此功能、解决潜在问题和塑造其未来绝对有帮助。

View Transitions 插件代表了 WordPress 在提升用户体验方面的重要一步，让网站导航变得更加流畅和现代化，同时保持了 WordPress 的易用性和灵活性。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。