脚趾浸入视图过渡-css教程-PHP中文网

脚趾浸入视图过渡

Lisa Kudrow

发布： 2025-03-07 16:37:09

原创

409 人浏览过

Toe Dipping Into View Transitions

坦白说，View Transition API 让我有点望而生畏。许多教程都展示了令人印象深刻的演示，说明我们如何为两个页面之间的转换制作动画，它们通常从最简单的示例开始：

@view-transition {
  navigation: auto;
}

登录后复制

但这通常也是简单部分的结束，教程随后会深入到 JavaScript 领域。当然，这没什么问题，只是对于像我这样通过循序渐进学习的人来说，这是一个巨大的飞跃。因此，当我看到 Uncle Dave 和 Jim Neilsen 分享关于一个非常实用的转换技巧（文章标题）时，我深受启发。

您可以在 Jim 的网站上看到它是如何工作的：

这正是我喜欢尝试新事物的那种完美的“浅尝辄止”实验。它从相同的 @view-transition 代码片段开始，该片段用于将两个页面都加入 View Transitions API：当前页面和要导航到的页面。从这里开始，我们可以将它们分别视为“新”页面和“旧”页面。

我也在我的个人博客上实现了相同的效果：

对于博客来说，这是一个完美的练习，对吧？它首先在我们要参与转换的元素上设置 view-transition-name，在本例中是“旧”页面上的文章标题和“新”页面上的文章标题。

因此，如果我们的标记如下：

<h1>Notes</h1>
<a href="https://www.php.cn/link/ddabb258dc2a7d5b5a7204fa68fe522f"></a>

登录后复制

……我们可以在 CSS 中为它们赋予相同的 view-transition-name：

.post-title { view-transition-name: post-title; }
.post-link { view-transition-name: post-title; }

登录后复制

Dave 很快指出，我们可以确保尊重那些偏好减少运动的用户，并且只有在他们的系统偏好允许运动的情况下才应用此设置：

@media not (prefers-reduced-motion: reduce) {
  .post-title { view-transition-name: post-title; }
  .post-link { view-transition-name: post-title; }
}

登录后复制

如果页面上只有这两个元素，那么这将正常工作。但是我们有一个文章链接列表，所有这些链接都必须有自己唯一的 view-transition-name。这就是 Jim 在他的工作中遇到一些困难的地方，因为当不断发布新的博客文章时，你到底该如何做到这一点？每次想要发布新内容时，你都必须编辑你的 CSS 并想出一个新的转换名称吗？不，一定有更好的方法。

确实有。或者，至少将来会有。它只是还不是标准的。事实上，Bramus 最近在讨论 Chrome 对 attr() 函数的工作时写到了这一点，该函数将能够在一个声明中生成一系列唯一的标识符。看看未来的这段 CSS：

.card[id] {
  view-transition-name: attr(id type(<custom-ident>), none); /* card-1, card-2, card-3, … */
  view-transition-class: card;
}
<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div></custom-ident>

登录后复制

太棒了！我现在就想用它！可惜不仅要等待 Chrome 开发它，还要等待其他浏览器采用和实现它，所以谁知道我们什么时候才能真正得到它。目前，最好的办法是直接在模板中使用一些编程逻辑。我的网站运行在 WordPress 上，因此我可以访问 PHP 并生成一个内联样式，在两个元素上设置 view-transition-name。

文章标题在我的单个博客文章的模板中。在 WordPress 行话中，那是 single.php 文件。

@view-transition {
  navigation: auto;
}

登录后复制

文章链接位于文章存档的模板中。在 WordPress 中，这通常是 archive.php：

<h1>Notes</h1>
<a href="https://www.php.cn/link/ddabb258dc2a7d5b5a7204fa68fe522f"></a>

登录后复制

看到那里发生了什么吗？view-transition-name 属性直接在内联上设置在两个转换元素上，使用 PHP 根据 WordPress 中文章的分配 ID 生成名称。另一种方法是在模板中添加一个 <style></style> 标签并将逻辑放在那里。与将来 attr() 能够实现的功能相比，这两种方法都同样笨拙，所以选择你喜欢的吧。

重要的是，现在这两个元素共享相同的 view-transition-name，并且我们已经加入了 @view-transition。有了这两个要素，转换就能工作了！我们甚至不需要定义 @keyframes（但你完全可以），因为默认转换完成了所有繁重的工作。

本着同样的“浅尝辄止”精神，我看到了最新一期的《Modern Web Weekly》，我喜欢在单选按钮上使用这个小小的 View Transition：

请注意，需要使用 JavaScript 来阻止单选按钮的默认点击行为，以便在选中输入之前允许转换运行。

以上是脚趾浸入视图过渡的详细内容。更多信息请关注PHP中文网其他相关文章！