AMP:简单的方法来切换CSS类？

Question

我正在构建一个加速移动页面(AMP)模板,并想知道是否有一种简单的方法可以在选项卡上切换CSS类.

我知道的事情如下:

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

但是这会写入内联样式 - 我宁愿切换自定义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

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>