範例：動畫漢堡選單 - 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