Содержание

Запуск анимации и переходов CSS

CSS-анимация позволяет веб-элементам переходить от одной конфигурации стиля CSS к другой. Браузер может запускать определенные анимации при загрузке, но запускаемые событиями CSS-анимации зависят от добавления и удаления классов. AMP поддерживает оба типа анимации.

Используйте CSS, когда у вас есть небольшая циклическая анимация, которая не требует точной синхронизации по времени.

Добавление CSS и ключевых кадров

Размещать код CSS в AMP-ресурсах можно следующими способами:

В теге <style amp-custom>, расположенном внутри элемента head. Ограничение в 75 000 байт.
В виде встроенных стилей. Каждый экземпляр встроенного стиля имеет ограничение в 1000 байт. Встроенные стили засчитываются в ограничение <style amp-custom> в 75 000 байт.
В теге <style amp-keyframes>, расположенном внутри элемента head. Ограничение в 500 000 байт. Может содержать только свойства ключевых кадров.

Подробнее об использовании CSS в AMP-ресурсах читайте в статье Стиль и компоновка.

Чтобы ваши страницы были простыми и быстрыми, AMP установил ограничение на CSS в составе тега <amp style-custom> в размере 75 000 байт. Хотя вы можете использовать этот тег для определения стилей анимации, ограничение в 500 000 байт внутри тега <amp style-keyframes> позволяет создавать более подробные анимации, которые не отнимут драгоценные ресурсы у стиля сайта.

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

Добавление и удаление классов

Действие AMP toggleClass позволяет добавлять к определенным элементам классы или удалять их.

elementName.toggleClass(class="className")

Вы можете переключать класс в том же элементе, с которым взаимодействует пользователь, например с анимированным меню гамбургеров.

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

Действие toggleClass можно применять и к другим элементам, а также использовать для переключения между двумя классами, добавляя в него атрибут 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>

Если вам нужно удалить класс и запретить его повторное добавление, добавьте атрибут force со значением false. Если вам нужно добавить класс и запретить удаление, добавьте force со значением true.

Анимация с помощью CSS и состояния

Используйте amp-bind, чтобы добавлять и удалять любое количество CSS-классов с состояниями.

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

Открыть этот фрагмент в песочнице

Чтобы добавить в класс несколько анимаций, сначала добавьте список CSS-классов в тег <style amp-custom> внутри элемента head:

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

Затем соедините каждый класс с состоянием:

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

Изменение состояний выполняется связанным действием или событием AMP. В примере ниже состояние меняется в результате действий пользователя:

<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 таким способом, явно выберите классом определенный класс. Вам не нужно будет инструктировать удалить другие классы.