如何为我的汉堡菜单提供动画

我想给我的汉堡菜单动画。我想在单击汉堡菜单图标时添加"推出"动画，在单击子菜单项时添加"放大"动画。我知道我需要将菜单中的动画类名称替换为 id 名称，但我不知道是哪些？

谢谢！

$(document).ready(function() {
  $('.icon').on('click', function() {
    $("#menu").toggle();
  });
  $('#menu a').on('click', function() {
    $(this).siblings('.submenu').toggle();
  });
});

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
}
.icon {
  width: 35px;
  margin: auto;
}
* {font-family: "Segoe UI", Tahoma;}
ul#menu > li {
  width: 100%;
  display: block;
}
ul#menu > li > ul.submenu {
  display: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul#menu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
ul#menu a {
  display: block;
  text-decoration: none; 
  color: black; 
  padding: 5px; 
}
.submenu {
}
@keyframes rollOut {
from {
  opacity: 1;
}
to {
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}
.rollOut{
-webkit-animation-name: rollOut;
animation-name: rollOut;
}
@keyframes zoomIn {
from {
  opacity: 0;
  -webkit-transform: scale3d(0.3, 0.3, 0.3);
  transform: scale3d(0.3, 0.3, 0.3);
}
50% {
  opacity: 1;
}
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stefan's menu's - 2</title>
<link href="main.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://cdn.saldev.nl/js/jquery/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="hamburger.js"></script>
</head>
<body>
<nav>
<div id="hamburger-menu">
  <div class="icon">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>
  <ul id="menu">
    <li>
     <a href="#">Menu Button</a>
      <ul class="submenu">
        <li><a href="#">Submenu</a></li>
        <li><a href="#">Submenu</a></li>
        <li><a href="#">Submenu</a></li>
      </ul>
    </li>
    <li>
     <a href="#">Menu Button</a>
      <ul class="submenu">
        <li><a href="#">Submenu</a></li>
        <li><a href="#">Submenu</a></li>
        <li><a href="#">Submenu</a></li>
      </ul>
    </li>
  </ul>
</div>
</nav>
</body>
</html>

您需要一个用于动画的 animation-duration 属性。
如果需要，您可以将animation-duration形式更改为 4 秒。

$(document).ready(function() {
  $('.icon').on('click', function() {
    $("#menu").toggle();
  });
  $('#menu a').on('click', function() {
    $(this).siblings('.submenu').toggle();
  });
});

      .bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
}
.icon {
    width: 35px;
    margin: auto;
}
* {font-family: "Segoe UI", Tahoma;}
ul#menu > li {
    width: 100%;
    display: block;
}
ul#menu > li > ul.submenu {
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul#menu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
ul#menu a {
    display: block;
    text-decoration: none; 
    color: black; 
    padding: 5px; 
}
.submenu {
}
@keyframes rollOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
.rollOut{
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
   -webkit-animation-duration: 4s;
  animation-duration: 4s;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
      <title>Stefan's menu's - 2</title>
      <link href="main.css" type="text/css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 </head>
    <body>
      <nav>
        <div id="hamburger-menu">
          <div class="icon">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
          </div>
          <ul id="menu">
            <li class="rollOut">
             <a href="#">Menu Button</a>
              <ul class="submenu zoomIn">
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
              </ul>
            </li>
            <li class="rollOut">
             <a href="#">Menu Button</a>
              <ul class="submenu zoomIn">
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </nav>
    </body>
    </html>

相关内容

最新更新

热门标签：