汉堡

汉堡

关注
发信
关注(28)粉丝(399)

javascript - 汉堡包在移动设备上的菜单中断

我已经对此汉堡包进行了编码：codepen，它在我的桌面上看起来很棒（对于所有屏幕尺寸）。但是，在我的手机中查看汉堡包时，单击鼠标后，线条会移到原处。这是一段视频，展示了汉堡菜单如何在手机上中断。我已经在Safari和chrome中测试了Codepen，结果相同：screen recording on mobile。继续观看视频直到结束。当您再次单击导航栏时，它将中断。这也让我感到惊讶，因为以前它在第一次点击时就中断了。我不知道为什么会发生这种奇怪的行为，所以我将不胜感激。

更清楚地说，这是单击“汉堡包”按钮时的外观：



这是它的外观：



码：



const menu = document.querySelector('.menu');
const logo = document.querySelector('.logo');
const dimmer = document.querySelector('.dimmer');
const hamburger = document.querySelector('#menu_btn');
const hamburgerLines = document.querySelectorAll('.hamburgerLine')

let addClasses = () => {
  // Menu
  menu.classList.add("transitionIn");

  // Logo
  logo.classList.add("transition");

  // Dimming
  dimmer.classList.add("dimmed");

  // Hamburger
  hamburgerLines.forEach(line => {
    line.classList.add("transition");
  })
}

let removeClasses = () => {
  // Menu
  menu.classList.remove("transitionIn");

  // Logo
  logo.classList.remove("transition");

  // Dimming
  dimmer.classList.remove("dimmed");

  // Hamburger
  hamburgerLines.forEach(line => {
    line.classList.remove("transition");
  })
}

let transitionIn = e => {
  hamburger.removeEventListener('click', transitionIn)
  addClasses();
  hamburger.addEventListener('click', transitionOut);
}

let transitionOut = e => {
  hamburger.removeEventListener('click', transitionOut);
  removeClasses();
  hamburger.addEventListener('click', transitionIn);
}

// Driver code
hamburger.addEventListener('click', transitionIn);

body {
  margin: 0;
  padding: 0;
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: pink;
}

.centerit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

header {
  height: 75px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 9999999;
  background-color: white;
  padding: 22px 16px;
}

header div {
  position: relative;
  width: 100%;
  height: 100%;
}

header div .logo {
  height: 100%;
  display: inline-block;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  -webkit-transition: fill 250ms ease-out;
  transition: fill 250ms ease-out;
}

header div .transition {
  fill: white;
}

header div div#menu_btn {
  position: absolute;
  top: 50%;
  right: 0;
  display: inline-block;
  width: initial;
  height: initial;
  z-index: 1000;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: pointer;
  overflow: visible;
}

header div div#menu_btn .menu_cont {
  width: 25px;
  height: 14px;
}

header div div#menu_btn .menu_cont span {
  overflow: visible;
  position: absolute;
  left: 0;
  -webkit-transition: all 250ms ease-out;
  transition: all 250ms ease-out;
  display: block;
  height: 3px;
  width: 25px;
  background-color: black;
  -webkit-transform-origin: right center;
  transform-origin: right center;
}

header div div#menu_btn .menu_cont span.one {
  top: 0;
}

header div div#menu_btn .menu_cont span.two {
  bottom: 0;
}

header div div#menu_btn .menu_cont span.one.transition {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: -3.5px;
}

header div div#menu_btn .menu_cont span.two.transition {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  bottom: -3px;
}

header div div#menu_btn .menu_cont .transition {
  background-color: white;
}

header .menu {
  background-color: #512F07;
  position: absolute;
  z-index: 999;
  top: -350px;
  left: 0;
  height: 350px;
  -webkit-transition: top 500ms ease-in-out;
  transition: top 500ms ease-in-out;
}

header .menu .navbar {
  height: 75px;
  width: 100%;
  background-color: transparent;
}

header .menu .item {
  height: 80px;
  width: 100%;
  text-align: center;
}

header .menu .item a {
  vertical-align: middle;
  text-decoration: none;
  color: white;
}

header .transitionIn {
  top: 0 !important;
}

.dimmer {
  position: absolute;
  display: none;
  visibility: hidden;
}

div.dimmed {
  background: #000;
  opacity: 0.5;
  position: fixed;
  /* important to use fixed, not absolute */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  visibility: visible;
  z-index: 10;
}

.welcome {
  height: 100%;
  width: 100%;
  background-color: #F4F4F4;
}

.welcome h1 {
  padding: 20px 16px;
  color: #F43D2F;
  text-align: center;
}

.sponsored {
  background-color: #7A45ED;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  height: 18px;
  width: 100%;
}

.sponsored p {
  white-space: pre;
  text-align: center;
  vertical-align: middle;
  color: white;
}

.trend {
  background-color: #4ED1A8;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  height: 18px;
  width: 100%;
}

.trend p {
  white-space: pre;
  text-align: center;
  vertical-align: middle;
  color: #512F07;
}

<body>
  <header>
    <div>
      <!-- Logo -->
      <a href="/">
        <svg class="logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 190 100" style="enable-background:new 0 0 190 100;" xml:space="preserve">
            <g id="Lager_1">
                <g>
                    <rect x="45" y="20" width="10" height="60"/>
                    <path d="M126.2,65h27.5l6.2,15h10l-25-60h-10l-25,60h10L126.2,65z M140,32l9.6,23h-19.2L140,32z"/>
                    <path d="M0,0v100h190V0H0z M180,90h-80V80H90v10H10V10h80v10h10V10h80V90z"/>
                </g>
            </g>
            <g id="Lager_2">
            </g>
            </svg>
      </a>

      <!-- Hamburger -->
      <div id="menu_btn">
        <div class="menu_cont">
          <span class="hamburgerLine one"></span>
          <span class="hamburgerLine two"></span>
        </div>
      </div>
    </div>

    <!-- Menu -->
    <div class="dimmer"></div>
    <div class="menu">
      <div class="navbar"></div>
      <div class="item centerit">
        <a href="">Item 1</a>
      </div>
      <div class="item centerit">
        <a href="">Item 1</a>
      </div>
      <div class="item centerit">
        <a href="">Item 1</a>
      </div>
    </div>
  </header>
</body>

最佳答案

它在Codepen中看起来绝对是螺丝钉。通过调整过渡和转换设置，我在代码笔上看起来是正确的：

header div div#menu_btn .menu_cont span {
  overflow: visible;
  position: absolute;
  left: 0;
  transition: transform 250ms ease-out; /* transform instead of all */
  display: block;
  height: 3px;
  width: 25px;
  background-color: black;
  /*  transform-origin: right center; */
}

header div div#menu_btn .menu_cont span.one.transition {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  top: 6px; /* changed */
}
header div div#menu_btn .menu_cont span.two.transition {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  bottom: 5px; /* changed */
}

关于javascript - 汉堡包在移动设备上的菜单中断，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61619681/

10-12 04:11
Powered by LMLPHP ©2024 汉堡 0.045291