触发 CSS 动画和过渡

Important: this documentation is not applicable to your currently selected format stories!

通过 CSS 动画，网络元素可以从一种 CSS 样式配置过渡到另一种。浏览器可以在加载时启动定义的动画，但事件触发的 CSS 动画则取决于类的添加和移除。AMP 同时支持这两种动画类型。

如果您的动画较小且独立，并且不需要精确计时，可以使用 CSS。

定义 CSS 和关键帧

可以按以下方式在 AMP 中定义 CSS：

在文档 head 的 <style amp-custom> 标记内定义。大小不能超过 75,000 字节。
内嵌样式。内嵌样式的每个实例不能超过 1,000 字节。内嵌样式的大小将计入 <style amp-custom> 标记支持的 75,000 字节限值中。
在文档 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')"
></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>

在 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 会将类明确设置为定义的类。您不必告知它移除其他类。