動畫式 Snackbar

簡介

Snackbar 透過螢幕底部的訊息，提供關於操作的簡短回饋。

設定

我們使用 amp-bind 來觸發 Snackbar...

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

... 並使用 amp-animation 來顯示和隱藏 Snackbar。

<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>

動畫

我們想要顯示一個幾秒鐘後會消失的 snackbar。這可以透過使用 amp-bind 新增 CSS 類別來顯示 snackbar，然後使用 CSS 動畫在幾秒鐘後隱藏 snackbar 輕鬆完成。但是，使用這種方法，無法多次觸發 snackbar（新增加的 CSS 類別不會消失）。

我們可以透過使用 amp-animation 擴充功能來解決這個問題，這使得重複執行動畫成為可能。我們定義一個動畫，該動畫將滑入 snackbar，然後使用 offset 屬性來定時不同的關鍵影格，在幾秒鐘後隱藏它。

<amp-animation id="snackbarSlideIn" layout="nodisplay">
  <script type="application/json">
    [{
      "duration": "3s",
      "fill": "both",
      "easing": "ease-out",
      "iterations": "1",
      "selector": ".snackbar",
      "keyframes": [{
          "transform": "translateY(100%)"
        },
        {
          "transform": "translateY(0)", "offset": 0.1
        },
        {
          "transform": "translateY(0)", "offset": 0.9
        },

        {
          "transform": "translateY(100%)"
        }
      ]
    }
    ]
  </script>
</amp-animation>

Snackbar

我們的 snackbar 是一個包含訊息的 div。它將在幾秒鐘後消失，因此我們不提供任何額外的按鈕來手動隱藏 snackbar。文字訊息綁定到 amp-state 變數，以使其內容可配置。如果 snackbar 應始終顯示相同的訊息，則不需要這樣做。

Hello World

<div class="snackbar" [text]="message">
  Hello World
</div>

觸發器

snackbar 動畫透過 restart 動作觸發：on="tap:snackbarSlideIn.restart"。我們使用 restart 動作，以便可以覆寫已啟用的動畫。輸入欄位僅更新包含 snackbar 訊息的 amp-state 變數。

<div class="trigger">
  <input on="input-debounced:AMP.setState({message: event.value})" value="Hello World">
  <button on="tap:snackbarSlideIn.restart">
    Show Snackbar
  </button>
</div>

需要進一步說明嗎？

如果本頁的說明沒有涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。

前往 Stack Overflow

未說明的特色功能？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎您針對您特別熱衷的問題做出一次性貢獻。

在 GitHub 上編輯範例

由 @sebastianbenz 撰寫