使用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中文網其他相關文章！