调整屏幕大小时，菜单错误地设置了动画

Question

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

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

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

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;
}