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属性灯箱并将其方法设置为关闭将关闭灯箱点击或点击元素时。

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

2 个答案: