動畫化 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。這可以透過新增一個 CSS 類別並使用 amp-bind 來顯示 snackbar，然後使用 CSS 動畫在幾秒後隱藏 snackbar 來輕鬆完成。然而，使用這種方法無法多次觸發 snackbar (新加入的 CSS 類別不會消失)。

我們可以使用 amp-animation 擴充功能來解決這個問題，這個功能可以重複執行動畫。我們定義一個動畫，這個動畫會滑入 snackbar，然後在幾秒後使用 offset 屬性來控制不同關鍵影格的時間，藉此隱藏 snackbar。

<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 撰寫