AMP HTML超时事件将在一段时间后关闭灯箱 [英] AMP HTML timeout event to close lightbox after some time

问题描述

在一段时间后，是否有可能在AMP HTML中关闭amp-lightbox组件? 表单提交成功后，我有一个灯箱显示，我想在例如5秒.

Is it possible in AMP HTML to close amp-lightbox component after a time delay? I have a lightbox shown after form submission success and I want to close it automatically after e.g. 5 seconds.

推荐答案

使用amp-lightbox无法做到这一点，但是您可以使用amp-bind和amp-animation来构建它.基本思想是:

This is not possible with amp-lightbox, but you could build this using amp-bind and amp-animation. The basic idea is:

• 定义显示和隐藏灯箱的多步放大动画
• 在表单提交成功时启动动画

看起来像这样:

<amp-animation id="snackbarSlideIn" layout="nodisplay">
  <script type="application/json">
    {
      "duration": "500",
      "fill": "both",
      "easing": "ease-out",
      "iterations": "1",
      "selector": ".snackbar",
      "keyframes": [{
          "transform": "translateY(-100%)"
        },
        {
          "transform": "translateY(0)"
        }
      ],
      "animation": "snackbarSlideOut"
    }
  </script>
</amp-animation>
<amp-animation id="snackbarSlideOut" layout="nodisplay">
  <script type="application/json">
    {
      "delay": "3s",
      "duration": "500",
      "fill": "both",
      "easing": "ease-in",
      "iterations": "1",
      "selector": ".snackbar",
      "keyframes": [{
          "transform": "translateY(0)"
        },
        {
          "transform": "translateY(-100%)"
        }
      ]
    }
  </script>
</amp-animation>
<div class="snackbar">
  Success
</div>

<form on="submit-success:snackbarSlideIn.start" ...>...</form>

此处是一个示例，展示了如何使用此方法创建小吃栏.

Here is a sample demonstrating how to use this approach to create a snackbar with AMP.

这篇关于AMP HTML超时事件将在一段时间后关闭灯箱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！