Amp html 一段时间后关闭lightbox的AMP HTML超时事件

在AMP HTML中，是否可以在延时后关闭

AMP lightbox

组件？ 表单提交成功后，我会显示一个灯箱，我希望在5秒钟后自动关闭它。

以下内容中未提及延迟：

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

---

这在amp lightbox中是不可能的，但是您可以使用amp绑定和amp动画来构建它。基本思想是：

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

看起来是这样的：

<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>

---

是一个示例，演示如何使用此方法创建带有AMP.
@sebastianbenz的方法-我尝试了您的代码，但出于某种原因，只有第二个动画（snackbarSlideOut）中的动画可见。如果删除此动画以及snackbarSlideIn中对它的引用，则第一个动画可见。知道为什么吗？（我检查了JSBin，它似乎也遇到了同样的问题-黑色条只是弹出，没有动画，但在第二个动画中消失了）