个人中心
gpt4 book ai didi

javascript - 我怎样才能给我的汉堡菜单动画？

转载 作者：行者123 更新时间：2023-11-28 17:06:28 25 4
gpt4 key购买 nike

我想给我的汉堡菜单动画。我想在单击汉堡菜单图标时添加“rollOut”动画，在单击子菜单项时添加“zoomIn”动画。我知道我需要用菜单中的 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>

关于javascript - 我怎样才能给我的汉堡菜单动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49209808/

25 4 0
文章推荐： javascript - 扩展运算符破坏了函数定义中的默认属性分配
文章推荐： python - 如何用大字典映射 dask 系列
文章推荐： javascript - 不通过浏览器向 REST API 发送请求
文章推荐： html - super 快速的 CSS 嵌套列表不会隐藏
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com