AMP HTML超时事件在一段时间后关闭灯箱

Question

AMP HTML中是否可以在延迟一段时间后关闭amp-lightbox组件？我在表单提交成功后显示了一个灯箱，我想在例如自动关闭后自动关闭它5秒。

Answer 1

这对于amp-lightbox来说是不可能的，但你可以使用amp-bind和amp-animation来构建它。基本思路是：

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

看起来像这样：

<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是一个演示如何使用这种方法创建带AMP的snackbar的示例。

Answer 2

没有提及closing the lightbox的延误：

按键盘上的退出键将关闭灯箱。或者，在灯箱内的一个或多个元素上设置on属性并将其方法设置为close将在点击或单击元素时关闭灯箱。