使用CSS锚定位和视图驱动的动画弹出评论

2024 年 CSS 现状调查结果已出炉，一如既往地引人入胜。虽然每个部分都值得深入分析，但我们通常最关注的是最常用 CSS 功能的部分。如果您有兴趣撰写关于 Web 开发的文章（也许可以和我们一起开始写作?），您会特别想查看该功能的“阅读清单”部分。它包含调查受访者在完成调查后希望阅读的功能，通常由社区认知度较低的最新功能组成。

令我兴奋的一个功能是我 2024 年的首选：CSS 锚点定位，在调查中排名第四。您可以在下面找到滚动驱动动画，这是另一个今年获得广泛浏览器支持的出色功能。两者都优雅且提供良好的开发者体验，但将它们结合起来会打开新的可能性，这些可能性在去年大多数人看来都属于 JavaScript 的领域。

我想展示其中一种可能性，同时进一步了解这两个功能。具体来说，我们将创建一个博客文章，其中脚注会作为评论弹出在每段文本的旁边。

对于此演示，我们的要求如下：

• 脚注进入屏幕时弹出。
• 将它们附加到相应的文本。
• 脚注位于屏幕两侧，因此我们需要一个移动端备用方案。

基础

首先，我们将使用以下常见的博客文章布局示例：标题、封面图片和正文：

需要注意的唯一一点是，我们偶尔会有一段带有脚注的段落：

<code><main><p>
    非常有趣的信息！
     关于它的脚注
  </p>
</main></code>

定位脚注

在此演示中，脚注位于文章正文中，紧跟在我们想要注释的文本之后。但是，我们希望它们作为浮动气泡附加在文本旁边。过去，我们可能需要结合使用绝对定位和相对定位，并为每个脚注找到正确的内边距属性。

但是，我们现在可以使用锚点定位来完成这项工作，这项功能允许我们将绝对定位的元素相对于其他元素进行定位——而不仅仅是相对于其所在的容器上下文。我们将讨论“锚点”和“目标”一段时间，因此在开始时需要一些术语：

• 锚点：这是用作定位其他元素的参考的元素，因此得名锚点。
• 目标：这是相对于一个或多个锚点定位的绝对定位元素。目标是我们从现在开始使用的名称，但在其他资源中，您经常会发现它只是“绝对定位元素”。

我不会详细介绍每个细节，但如果您想了解更多信息，我强烈推荐我们的锚点定位指南，其中包含完整的信息和示例。

锚点和目标

很容易知道每个 .footnote 都是目标元素。然而，选择我们的锚点需要更多的细微差别。虽然看起来每个 .note 元素都应该是锚点元素，但最好选择整个 .post 作为锚点。如果我们将 .footnote 的位置设置为绝对定位，我来解释一下：

<code><main><p>
    非常有趣的信息！
     关于它的脚注
  </p>
</main></code>

您会注意到，文章中的 .footnote 元素已从正常的文档流中移除，并且它们在视觉上悬停在它们的 .note 元素上方。这是个好消息！由于它们已经在垂直轴上对齐，我们只需使用文章作为锚点，在水平轴上将它们移动到侧面即可。

这时，我们需要找到正确的内边距属性才能将它们放在两侧。虽然这是可行的，但这却是一个痛苦的选择，因为：

1. 您必须依赖一个神奇数字。
2. 它取决于视口。
3. 它取决于脚注的内容，因为它会改变其宽度。

元素默认情况下不是锚点，因此要将文章注册为锚点，我们必须使用 anchor-name 属性并为其提供一个短横线标识符（以两个短横线开头的自定义名称）作为名称。

<code>.footnote {
  position: absolute;
}</code>

在这种情况下，我们的目标元素将是 .footnote。要使用目标元素，我们可以保留绝对定位并使用 position-anchor 属性选择锚点元素，该属性采用锚点的短横线标识符。这将使 .post 成为下一步中目标的默认锚点。

<code>.post {
  anchor-name: --post;
}</code>

移动目标

与其为 .footnote 的 left 或 right 属性选择任意内边距值，我们可以使用 anchor() 函数。它返回一个表示锚点一侧位置的 <length></length> 值，允许我们始终正确设置目标的内边距属性。因此，我们可以将目标的左侧连接到锚点的右侧，反之亦然：

<code>.footnote {
  position: absolute;
  position-anchor: --post;
}</code>

但是，您会注意到它卡在文章的一侧，中间没有空间。幸运的是，margin 属性的工作方式与您希望的针对目标元素的方式一样，并在脚注目标和文章锚点之间留出一些空间。我们还可以添加更多样式以使外观更漂亮：

<code>.footnote {
  position: absolute;
  position-anchor: --post;

  /* 将它们放在右侧 */
  left: anchor(right);

  /* 或将它们放在左侧 */
  right: anchor(left);

  /* 每次只使用其中一个！ */
}</code>

最后，所有 .footnote 元素都在文章的同一侧，如果我们想将它们安排在每一侧，我们可以使用 nth-of-type() 选择器来选择奇数和偶数注释并将它们设置在相对的侧边。

<code>.footnote {
  /* ... */

  background-color: #fff;
  border-radius: 20px;
  margin: 0px 20px;
  padding: 20px;
}</code>

我们使用 nth-of-type() 而不是 nth-child，因为我们只想迭代 .note 元素而不是所有同级元素。

请记住从 .footnote 中删除最后一个内边距声明，然后瞧！我们的脚注位于每一侧。您会注意到我还为每个脚注添加了一个小三角形，但这超出了本文的范围：

视图驱动动画

让我们开始创建弹出动画。我发现这是最简单的一部分，因为视图和滚动驱动动画都尽可能直观。我们将首先使用常见的 @keyframes 注册动画。我们想要的是让我们的脚注从不可见开始，然后慢慢变大并可见：

<code><main><p>
    非常有趣的信息！
     关于它的脚注
  </p>
</main></code>

这就是我们的动画，现在我们只需要将其添加到每个 .footnote：

<code>.footnote {
  position: absolute;
}</code>

这本身不会做任何事情。我们通常会为它设置一个 animation-duration 以使其开始。但是，视图驱动动画不会通过设定的时间运行，而是动画进度将取决于元素在屏幕上的位置。为此，我们将 animation-timeline 设置为 view()。

<code>.post {
  anchor-name: --post;
}</code>

这使得动画在元素离开屏幕时结束。我们希望它在更易读的位置结束。最后的润色是将 animation-range 设置为 cover 0% cover 40%。这意味着，“我希望元素在视图中为 0% 时开始动画，并在视图中为 40% 时结束。”

<code>.footnote {
  position: absolute;
  position-anchor: --post;
}</code>

Bramus 的这个令人惊叹的工具更侧重于滚动和视图驱动动画，它更好地展示了 animation-range 属性的工作原理。

移动端怎么办？

您可能已经注意到，这种脚注方法在较小的屏幕上不起作用，因为文章两侧没有空间。修复很简单。我们希望脚注在小屏幕上显示为普通脚注，在大屏幕上显示为注释，我们可以通过仅在屏幕大于某个阈值（约 1000 像素）时才显示我们的注释来做到这一点。如果不是，则注释将像您在 Web 上找到的任何其他注释一样显示在文章正文中。

<code>.footnote {
  position: absolute;
  position-anchor: --post;

  /* 将它们放在右侧 */
  left: anchor(right);

  /* 或将它们放在左侧 */
  right: anchor(left);

  /* 每次只使用其中一个！ */
}</code>

现在，只有当有足够的空间时，我们的注释才会显示在两侧：

总结

如果您也喜欢撰写自己热衷的内容，您会经常发现自己会进入随机的切线，或者想要为每段添加评论以提供额外的上下文。至少，这就是我的情况，因此能够动态显示评论是一个很好的补充。特别是当我们仅使用 CSS 就能实现这一点时——这是我们一年前无法做到的！

以上是使用CSS锚定位和视图驱动的动画弹出评论的详细内容。更多信息请关注PHP中文网其他相关文章！