触发 CSS 动画和过渡

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

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

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

定义 CSS 和关键帧

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

有关在 AMP 中使用 CSS 的信息，请参阅样式和布局。

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