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