触发 CSS 动画和过渡

CSS 动画使 Web 元素能够从一种 CSS 样式配置过渡到另一种配置。浏览器可以在加载时启动定义的动画，但事件触发的 CSS 动画依赖于添加和删除类。AMP 支持两种动画类型。

当您有一个较小、包含的动画，不需要精确计时时，请使用 CSS。

定义 CSS 和关键帧

您可以通过以下方式在 AMP 中定义 CSS

在文档 head 中的 <style amp-custom> 标签内。限制为 75,000 字节。
内联样式。每个内联样式实例的限制为 1,000 字节。内联样式计入 75,000 字节的 <style amp-custom> 限制。
在文档 head 中的 <style amp-keyframes> 标签内。限制为 500,000 字节。仅限于关键帧属性。

在样式和布局中了解有关在 AMP 中使用 CSS 的更多信息。

为了保持页面的简洁和快速，AMP 在 <amp style-custom> 标签中强制执行 75,000 字节的 CSS 限制。虽然您可以使用它来定义动画样式，但 <amp style-keyframes> 标签内 500,000 字节的限制允许更详细的动画，而不会占用宝贵的站点样式资源。

  <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')">

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>

如果您需要删除一个类并禁止重新应用，请添加值为 false 的 force 属性。如果您需要添加一个类并禁止删除，请添加值为 true 的 force。

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

在 playground 中打开此代码片段

首先，在文档 head 中的 <style amp-custom> 标签内添加 CSS 类列表，从而定义多个类动画

    .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 将类显式设置为定义的类。您不必告诉它删除其他类。