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

Question

我有一个带有徽标切换按钮的侧边栏菜单，该按钮可以切换类"切换"，并且在大屏幕上也出现在悬停时。 侧边栏左侧：100%，切换/悬停左侧：0; 在除野生动物园以外的所有浏览器上，它都可以正常工作。仅在 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>

这是当"徽标"在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。我提供了无效的逻辑来切换类，但我只是想向您展示有效的解决方案。

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

标签