AMP: простой способ переключения класса CSS?

Question

Я создал шаблон ускоренной мобильной страницы (AMP), и мне было интересно, есть ли простой способ переключения класса CSS на вкладке.

Я знаю о таких вещах, как:

<h2 
  class="headline"
  on="tap:list.toggleVisibility"
>
<ul id="list"></ul>

Но это пишет inline-styles - я бы предпочел переключить пользовательский класс CSS, но не смог найти пример на странице AMP.

AMP.setState с привязками типа <h2 [class]="myclasses"> выглядело как выход, но манипулировать состоянием довольно сложно с помощью инструментов, которые они вам дают...

Answer 1

Это можно сделать через amp-bind, Вы можете использовать неявную переменную состояния, например visible, чтобы отслеживать текущее состояние. Вот пример, который переключает два класса show а также hide:

  <button [text]="visible ? 'Show Less' : 'Show More'" 
           on="tap:AMP.setState({visible: !visible})">
    Show More
  </button>
  <p [class]="visible ? 'show' : 'hide'" class="hide">
    Some more content.
  </p>

Полный образец на JSBIN

Answer 2

There is also an element specific action with AMP Bind toggleClass(class=STRING, force=BOOLEAN)

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

<h2 
class="headline"
on="tap:list.toggleClass(class='my-custom-class')">
<ul id="list"></ul>