Daftar isi

Memicu transisi & animasi CSS

Animasi CSS memungkinkan elemen web untuk bertransisi dari satu konfigurasi gaya CSS ke yang lain. Browser dapat memulai animasi yang telah ditentukan saat dimuat, namun animasi CSS yang dipicu peristiwa bergantung pada penambahan dan penghapusan kelas. AMP mendukung kedua jenis animasi.

Gunakan CSS jika Anda mempunyai animasi berisi yang lebih kecil yang tidak perlu penetapan waktu yang akurat.

Menentukan CSS dan keyframe

Anda dapat menentukan CSS dalam AMP dengan cara berikut ini:

Dalam tag <style amp-custom> di dalam tajuk dokumen. Batas 75.000 byte.
Gaya inline. Setiap gaya inline mempunyai batas 1.000 byte. Gaya inline dihitung hingga batas 75.000 byte <style amp-custom>.
Dalam tag <style amp-keyframes> di dalam tajuk dokumen. Batas 500.000 byte. Dibatasi pada properti keyframe.

Baca selengkapnya di Gaya & tata letak tentang menggunakan CSS dalam AMP.

Agar halaman Anda tetap ramping dan kencang, AMP telah menerapkan batas CSS 75.000 byte pada tag <amp style-custom>. Walaupun Anda dapat menggunakan ini untuk menentukan gaya animasi, batas 500.000 byte di dalam tag <amp style-keyframes> memungkinkan lebih banyak animasi berlebihan yang tidak akan menghabiskan sumber daya gaya situs yang berharga.

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

Menambahkan, menghapus, dan mengalihkan kelas

Tindakan AMP, toggleClass memungkinkan penambahan dan penghapusan kelas pada elemen yang telah ditentukan.

elementName.toggleClass(class="className")

Anda dapat mengalihkan kelas pada elemen yang sama yang Anda inginkan berinteraksi dengan pengguna, seperti menu hamburger animasi.

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

Tindakan toggleClass dapat berlaku pada elemen lain serta beralih di antara dua kelas dengan menambahkan atribut 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>

Jika Anda perlu menghapus sebuah kelas dan tidak mengizinkan penerapan ulang, tambahkan atribut force dengan nilai false. Jika Anda perlu menambahkan dan tidak mengizinkan penghapusan, tambahkan force dengan nilai true.

Animasi dengan CSS dan status

Anda dapat menambahkan dan menghapus berapa pun jumlah kelas CSS dengan status yang menggunakan 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>

Buka cuplikan ini di playground

Tentukan beberapa kelas animasi dengan terlebih dahulu menambahkan daftar kelas CSS dalam tag <style amp-custom> di dalam head dokumen:

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

Lalu, pasangkan setiap kelas dengan sebuah status:

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

Dan tautkan elemen dengan kelas:

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

Status berubah dari peristiwa atau tindakan AMP yang tertaut. Contoh berikut ini mengubah status dari interaksi pengguna:

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

Menggunakan amp-bind dengan cara ini akan menetapkan kelas secara eksplisit pada kelas yang telah ditentukan. Anda tidak akan perlu menyuruhnya untuk menghapus kelas lain.