动画 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 撰写