AMP

Attivazione di animazioni e transizioni CSS

Le animazioni CSS consentono agli elementi web di passare da una configurazione di stile CSS all'altra. Il browser può avviare animazioni definite al caricamento, ma le animazioni CSS attivate da eventi si basano sull'aggiunta e sulla rimozione di classi. AMP supporta entrambi i tipi di animazione.

L'uso di oggetti CSS è preferibile in caso di animazioni più piccole e limitate che non richiedono temporizzazioni precise.

Definizione di CSS e fotogrammi chiave

Le definizioni CSS possono essere inserite in AMP nei seguenti modi:

Ulteriori informazioni sull'utilizzo dei contenuti CSS in AMP sono disponibili nella sezione Stili e layout.

  <style amp-custom>
    div {
      width: 100px;
      height: 100px;
      background: red;
      position: relative;
      animation: mymove 5s infinite;
    }
  </style>
</head>
<body>

<div></div>
  <style amp-keyframes>
   @keyframes mymove {
      0%   {transform: translatey(0px);}
      25%  {transform: translatey(200px);}
      75%  {transform: translatey(50px);}
      100% {transform: translatey(100px);}
    }
  </style>
</body>

Aggiunta, rimozione e attivazione/disattivazione di classi

L'azione AMP toggleClass consente l'aggiunta e la rimozione di classi da elementi definiti.

elementName.toggleClass(class="className")

Puoi attivare o disattivare una classe sullo stesso elemento con cui desideri che gli utenti interagiscano, ad esempio un menu animato per la scelta di hamburger.

<div
  id="hamburger"
  tabindex="1"
  role="button"
  on="tap:hamburger.toggleClass(class='close')"
></div>

L'azione toggleClass può essere applicata anche ad altri elementi e permette di passare da una classe all'altra aggiungendo l'attributo force.

<button
  on="tap:magicBox.toggleClass(class='invisible', force=true),magicBox.toggleClass(class='visible', force=false)"
>
  Disappear
</button>
<button
  on="tap:magicBox.toggleClass(class='visible', force=true),magicBox.toggleClass(class='invisible', force=false)"
>
  Reappear
</button>

Se è necessario rimuovere una classe ed impedirne altre applicazioni, occorre aggiungere l'attributo force con un valore false. Se è necessario aggiungere una classe ed impedirne la rimozione, occorre aggiungere l'attributo force con un valore true .

Animazioni con elementi CSS e stati

Si possono aggiungere e rimuovere tutte le classi CSS con stati che occorre, utilizzando amp-bind.

<head>
  <script
    async
    custom-element="amp-bind"
    src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"
  ></script>
  <style amp-custom>
    div {
      height: 100px;
      width: 100px;
      margin: 1em;
      background-color: green;
      margin-left: 100px;
      transition: 2s;
    }
    .visible {
      opacity: 1;
    }
    .invisible {
      opacity: 0;
    }
    .left {
      transform: translatex(-50px);
    }
    .right {
      transform: translatex(50px);
    }
    button {
      margin-top: 1rem;
      margin-left: 1rem;
    }
  </style>
</head>
<body>
  <amp-state id="magicBox">
    <script type="application/json">
      {
        "visibleBox": {
          "className": "visible"
        },
        "invisibleBox": {
          "className": "invisible"
        },
        "moveLeft": {
          "className": "left"
        },
        "moveRight": {
          "className": "right"
        }
      }
    </script>
  </amp-state>
  <div [class]="magicBox[animateBox].className"></div>
  <button on="tap:AMP.setState({animateBox: 'invisibleBox'})">Disappear</button>
  <button on="tap:AMP.setState({animateBox: 'visibleBox'})">Reappear</button>
  <button on="tap:AMP.setState({animateBox: 'moveLeft'})">Move Left</button>
  <button on="tap:AMP.setState({animateBox: 'moveRight'})">Move Right</button>
</body>
Apri questo frammento in playground

Per pefinire più animazioni di classe, occorre aggiungere dapprima un elenco delle classi CSS all'interno del tag <style amp-custom> nella sezione head del documento:

.visible {
  opacity: 1;
}
.invisible {
  opacity: 0;
}
.left {
  transform: translatex(-50px);
}
.right {
  transform: translatex(50px);
}

Quindi occorre abbinare ogni classe a uno stato:

<amp-state id="magicBox">
  <script type="application/json">
    {
      "visibleBox": {
        "className": "visible"
      },
      "invisibleBox": {
        "className": "invisible"
      },
      "moveLeft": {
        "className": "left"
      },
      "moveRight": {
        "className": "right"
      }
    }
  </script>
</amp-state>

E collegare l'elemento con le classi:

<div [class]="magicBox[animateBox].className"></div>

Gli stati sono cambiati da azioni o eventi AMP collegati. L'esempio seguente cambia lo stato a seguito dell'interazione utente:

<button on="tap:AMP.setState({animateBox: 'invisibleBox'})">Disappear</button>
<button on="tap:AMP.setState({animateBox: 'visibleBox'})">Reappear</button>
<button on="tap:AMP.setState({animateBox: 'moveLeft'})">Move Left</button>
<button on="tap:AMP.setState({animateBox: 'moveRight'})">Move Right</button>

L'uso di amp-bind in questo modo imposta esplicitamente la classe su quella definita. Non sarà necessario indicare la rimozione di altre classi.