動畫彈出式訊息

簡介

彈出式訊息透過畫面底部的訊息，提供關於操作的簡短意見回饋。

設定

我們使用 amp-bind 來觸發彈出式訊息...

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

... 並使用 amp-animation 來顯示及隱藏彈出式訊息。

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

動畫

我們想要顯示一個在幾秒後消失的彈出式訊息。這可以透過使用 amp-bind 新增 CSS 類別來顯示彈出式訊息，然後使用 CSS 動畫在幾秒後隱藏彈出式訊息來輕鬆完成。然而，使用這種方法，無法多次觸發彈出式訊息 (新加入的 CSS 類別不會消失)。

我們可以透過使用 amp-animation 擴充功能來解決這個問題，這使得重複執行動畫成為可能。我們定義一個動畫，它會滑入彈出式訊息，然後在幾秒後使用 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>

彈出式訊息

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

Hello World

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

觸發器

彈出式訊息動畫是透過 restart 動作觸發的：on="tap:snackbarSlideIn.restart"。我們使用 restart 動作，以便可以覆寫已啟用的動畫。輸入欄位只會更新包含彈出式訊息訊息的 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 撰寫