AMP：切换 CSS class 的简单方法？

Question

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

我知道这样的事情：

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

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

Full sample on JSBIN

Answer 2

AMP 绑定还有一个特定于元素的操作 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>

AMP：切换 CSS class 的简单方法？

AMP: easy way to toggle a CSS class?

css

amp-html