仅在 Safari 中悬停/类切换上的元素抖动

Question

我有一个带有徽标切换按钮的侧边栏菜单，可以切换“切换”类，并且在大屏幕上也出现在悬停时。 侧边栏在左侧：100%，在切换/悬停左侧：0； 在除 safari 之外的所有浏览器上都可以正常工作。只有在 Safari 中，当导航出现时，徽标按钮才会摆动/摇晃。

这里是代码的简短概述：

.main-navigation {
//Structure
display: inline-block;
width: 160px;
transition: all 250ms ease-in;
height: 100vh;
z-index: 100;
position: fixed;
left: -100%; 
background-color: $color__primary;

&.toggled {
    left: 0;
}

.menu-toggle {
    margin-left: auto;
    align-self: flex-end;
    display: inline-block;
    position: fixed;
    background: none;
    border: none;
    border-radius: 0;
    left: 20px;
    top: 25px;
    width: auto;
    height: auto;
    padding: 0;
    z-index: 110;

    &:focus, &:active {
        outline: none;
    }
}
}

在大屏幕上，我只需添加悬停：

.main-navigation{
    &:hover {
        left: 0;
    }
}

你可以在https://rocket.creos.agency/下看到它的直播

我希望我只是忽略了一些小事。

感谢您的帮助！

Answer 1

为了解决您的问题，您需要从nav 元素中移动您的“徽标”。如果它在里面，就像你有的那样，它正在尝试为nav 中的所有元素设置动画。

这是您使用简单代码的逻辑（徽标在 nav 内）：

body {
  margin: 0;
  padding: 0;
}
nav {
  position: fixed;
  height: 100vh;
  width: 160px;
  left: -160px;
  background-color: tomato;
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}
nav:hover {
  left: 0;
}
button {
  position: fixed;
  top: 10px;
  left: 10px;
}
.content {
  margin-top: 50px;
}

<nav>
  <button>
    Hover me
  </button>
  <div class='content'>
    <ul>
      <li>
        one
      </li>
      <li>
        two
      </li>
    </ul>
  </div>
</nav>

这是当'logo'在nav之外时：

(() => {
	const btn = document.getElementById('animateNav');
  const nav = document.getElementById('navigation');
  const content = document.getElementById('content');
  btn.addEventListener('mouseover', () => {  	
    nav.classList.add("animate");
  });
  nav.addEventListener('mouseout', () => {  	
    nav.classList.remove("animate");
  });
  nav.addEventListener('mouseover', () => {  	
    nav.classList.add("animate");
  });
  content.addEventListener('mouseover', () => {  	
    nav.classList.add("animate");
  });
})();

body {
  margin: 0;
  padding: 0;
}
nav {
  position: fixed;
  height: 100vh;
  width: 160px;
  left: -160px;
  background-color: tomato;
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}
nav.animate {
  left: 0;
}
button {
  position: fixed;
  top: 10px;
  left: 10px;
}
#content {
  margin-top: 50px;
}

<nav id='navigation'>
  <div id='content'>
    <ul>
      <li>
        one
      </li>
      <li>
        two
      </li>
    </ul>
  </div>
</nav>
<button id='animateNav'>
  Hover me
</button>

所有不同之处在于第二个示例，您需要使用 JavaScript 为 nav 切换一个类。我提供的切换类的逻辑效率不高，但我只是想向您展示可行的解决方案。

附：不要在<button> 标签内使用<a> 标签