¿Cómo crear un Snackbar animado en AMP HTML?

Snackbars animados proporcionan comentarios breves sobre una operación a través de un mensaje en la parte inferior de la pantalla.

Tendrá que uar amp-bind para activar la Snackbar

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

y amp-animation para mostrar y ocultar la Snackbar.

<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>

La animación

Queremos mostrar un snackbar que desaparece después de unos segundos. Esto podría lograrse fácilmente agregando una clase de CSS usando amp-bind para mostrar la barra de Snackbar y luego usar animaciones CSS para ocultar la barra Snackbar después de unos segundos. Sin embargo, con este enfoque no es posible disparar el Snackbar varias veces (la clase CSS recién agregada no desaparece).

Podemos resolver este problema utilizando la extensión amp-animation, permite ejecutar animaciones repetidamente. Definimos una animación que se deslizará en la barra de snack y luego la esconderá después de unos segundos utilizando el atributo de desplazamiento para sincronizar los diferentes fotogramas clave.

<amp-animation id="snackbarSlideIn"
  layout="nodisplay">
  <script type="application/json">
    [{
      "duration": "3s",
      "fill": "both",
      "easing": "ease-out",
      "iterations": "1",
      "selector": ".snackbar",
      "keyframes": [{
          "transform": "translateY(100%)"
        },
        {
          "transform": "translateY(0)",
          "offset": 0.1
        },
        {
          "transform": "translateY(0)",
          "offset": 0.9
        },

        {
          "transform": "translateY(100%)"
        }
      ]
    }]
</script>
</amp-animation>

El Snackbar

El snackbar es un div que contiene el mensaje. Desaparecerá después de unos segundos, por lo que no proporcionaremos botones adicionales para ocultar manualmente la barra. El mensaje de texto está vinculado a una variable amp-state para que su contenido sea configurable. Esto no es necesario si siempre debe mostrar el mismo mensaje.

<div class="snackbar"
  [text]="message">
  Hello World
</div>

The Trigger

La animación de la barra de snacks se activa a través de la acción de reinicio "restart": on="tap:snackbarSlideIn.restart". Usamos la acción de reinicio para posibilitar la anulación de una animación ya activa. El campo de entrada simplemente actualiza la variable amp-state que contiene el mensaje de la barra.

Ejemplo



  


  Hello World


  
  




<div class="trigger">
  <input on="input-debounced:AMP.setState({message: event.value})"
    value="Hello World">
  <button on="tap:snackbarSlideIn.restart">
    Show Snackbar
  </button>
</div>

Tags: AMP Tutorial Efectos visuales Tutorial AMP

Share: