İçindekiler

CSS animasyonlarını ve geçişlerini tetikleme

Important: this documentation is not applicable to your currently selected format email!

CSS animasyonları, web öğelerinin bir CSS stili yapılandırmasından diğerine geçmesine izin verir. Tarayıcı, yükleme sırasında belirli animasyonları başlatabilir. Ancak olay tetiklenen CSS animasyonları sınıflarının eklenmesine ve kaldırılmasına dayanır. AMP her iki animasyon türünü de destekler.

Kesin olarak zamanlanması gerekmeyen daha küçük, kapsayıcı bir animasyonunuz olduğunda CSS kullanın.

CSS ve anahtar kareleri tanımlama

CSS'i AMP'de aşağıdaki şekillerde tanımlayabilirsiniz:

AMP'de CSS kullanma hakkında Stil ve düzen bölümünden daha fazla bilgi edinin.

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

Sınıfları ekleme, kaldırma ve değiştirme

AMP eylemi toggleClass, tanımlanmış öğelere sınıfların eklenmesini ve kaldırılmasını sağlar.

elementName.toggleClass(class="className")

Animasyonlu hamburger menüsü gibi, kullanıcıların etkileşimde bulunmasını istediğiniz aynı öğe üzerinde bir sınıfı açıp kapatabilirsiniz.

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

toggleClass eylemi diğer öğelere de uygulanabilir ve force özniteliğini ekleyerek iki sınıf arasında geçiş yapabilir.

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

Bir sınıfı kaldırmanız ve yeniden uygulamaya izin vermemeniz gerekiyorsa, force özniteliğine false değerini ekleyin. Bir sınıf eklemeniz ve kaldırmaya izin vermemeniz gerekiyorsa, true değeriyle force ekleyin.

CSS ve state ile canlandırma

amp-bind kullanarak durumlarla istediğiniz sayıda CSS sınıfı ekleyebilir ve kaldırabilirsiniz.

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

Bu kod parçacığını playground'ta aç

Önce belgenin head bölümündeki <style amp-custom> etiketine CSS sınıflarının bir listesini ekleyerek birden fazla sınıf animasyonu tanımlayın:

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

Ardından her sınıfı bir durum ile eşleştirin:

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

Ve öğeyi sınıflarla ilişkilendirin:

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

Durumlar, bağlantılı bir AMP eylemi veya olayından değişir. Aşağıdaki örnek, durumu kullanıcı etkileşiminden değiştirir:

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

amp-bind'i bu şekilde kullanmak, sınıfı açıkça tanımlanmış sınıfa ayarlar. Diğer sınıfları kaldırmasını söylemenize gerek kalmayacak.