Hover/Class 上的元素摇动仅在 Safari 中切换

Question

我有一个带有徽标切换按钮的侧边栏菜单，可以切换 class "toggled" 并且在大屏幕上也会出现在悬停时。侧边栏左侧：100% 和 toggle/hover 左侧：0；在除 safari 之外的所有浏览器上它都可以正常工作。只有在 safari 上，徽标按钮 wiggles/shakes 才会显示导航。

这里是代码的简短概述：

.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

为了解决您的问题，您需要将 'logo' 从 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 切换 class。我提供的切换 class 的逻辑不高效，但我只是想向您展示可行的解决方案。

P.S。不要在 <button> 标签内使用 <a> 标签

Hover/Class 上的元素摇动仅在 Safari 中切换

Element shaking on Hover/Class Toggle only in Safari

html

css

safari

transition