动画 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 始终显示相同的消息，则不需要这样做。

你好世界

<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