動畫化的 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