示例：动画汉堡菜单 - amp.dev

动画汉堡菜单
- 简介 CSS 动画标记

网站

简介

小的交互式 UI 动画向用户传达状态和目的。一个常见的情况是汉堡菜单按钮，在打开时会动画成“X”形。此动画传达用户可以再次按相同的按钮来关闭菜单。

CSS 动画

以下是汉堡菜单的自定义样式和 CSS 动画

<style amp-custom>
  .hamburger_wrapper {
    padding: 5px;
    z-index: 10;
  }

  #hamburger {
    width: 60px;
    height: 45px;
    position: relative;
    cursor: pointer;
    outline: none;

  }

  #hamburger span {
    display: block;
    position: absolute;
    height: 9px;
    width: 100%;
    background: #005af0;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .5s ease-in-out;
  }

  #hamburger span:nth-child(1) {
    top: 0px;
    transform-origin: left center;
  }

  #hamburger span:nth-child(2) {
    top: 21px;
    transform-origin: left center;
  }

  #hamburger span:nth-child(3) {
    top: 42px;
    transform-origin: left center;
  }

  #hamburger.close span:nth-child(1) {
    transform: rotate(45deg);
  }

  #hamburger.close span:nth-child(2) {
    width: 0%;
    opacity: 0;
    transition: .1s;
  }

  #hamburger.close span:nth-child(3) {
    transform: rotate(-45deg);
  }

  #nav-menu {
    position: relative;
    transform: translateX(-100vw);
    opacity: 0;
    z-index: 10;
    transition: transform .5s ease, opacity ease .2s;
  }

  #nav-menu.now-active {
    transform: translateX(0);
    transition: transform .5s ease, opacity ease .2s;
    opacity: 1;
    background-color: #eaeaea;
  }

  .nav-list {
    padding: 10px;
    list-style-type: none;
    font-size: 2em;
  }

</style>

标记

汉堡菜单元素在 div 内包含三个样式化的 span 元素。汉堡包 div 使用 tap AMP 操作来触发 toggleClass() 事件，该事件按其 id 定位元素。在此示例中，它定位 hamburger。

toggleClass() 事件将添加和删除作为参数给定的任何类。此示例传递 class='close'。此外，它还会切换导航菜单的动画类以滑出。

<div class="hamburger_wrapper">
  <div id="hamburger" tabindex="1" role="button" on="tap:hamburger.toggleClass(class='close'),nav-menu.toggleClass(class='now-active')">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>
<div id="nav-menu">
  <ul class="nav-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">Account</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Support</a></li>
  </ul>
</div>

需要进一步解释吗？

如果本页上的解释没有涵盖您所有的问题，请随时与其他 AMP 用户联系，讨论您的确切用例。

转到 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的长期参与者，但我们也欢迎您针对自己特别感兴趣的问题进行一次性贡献。

在 GitHub 上编辑示例

作者 @CrystalOnScript