html - 调整屏幕大小时菜单动画错误

Question

即使将浏览器设置为关闭，我的菜单动画也会在调整浏览器大小时突然出现。它只能在桌面上看到问题。我唯一的临时解决方案是删除过渡，但我仍然想实现滑动动画。

这是实际的网站：https ://jxvicinema.github.io/juniper-roots-park-v2/

虽然这是我的存储库：https ://github.com/jxvicinema/juniper-roots-park-v2

标签： htmlcss

Answer 1

您需要将该display属性添加到您的.nav-links和nav-active喜欢下面。

.nav-links{
 display: none;
}

.nav-active{
 display: flex;
}

所以要让动画工作而不是display属性添加opacity属性。

.nav-links{
 opacity: 0;
}

.nav-active{
  opacity: 1;
}