AMP 시간 초과 후 라이트 박스를 닫으려면 HTML 시간 초과 이벤트

Question

시간 지연 후 AMP HTML에서 amp-lightbox 구성 요소를 닫을 수 있습니까? 양식 제출 성공 후 표시되는 라이트 박스가 있는데 예를 들어 자동으로 닫고 싶습니다. 5 초.

Answer 1

이것은 amp-lightbox에서는 가능하지 않지만 amp-bind와 amp-animation을 사용하여 만들 수 있습니다. 기본적인 아이디어는 다음과 같습니다

:

• 성공을 제출 양식에 애니메이션을 시작 같을 것이다

을 보여주고 라이트

을 숨 깁니다 다단계 A-애니메이션을 정의

<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 지연 없음 언급 :

라이트를 닫습니다 키보드의 Esc 키를 누르면. 또는 하나 이상의 요소에 on 속성을 설정하면 lightbox가 안에 있고 그 메소드를 닫으려면 요소가 탭되거나 클릭 될 때 라이트 박스가 닫힙니다.