我正在尝试使用 JavaScript
为我的 subnav
设置动画。我想显示所有 subnavs
,类似于“大型菜单”类型的导航。现在,它淡入,但从最右边的 subnav
淡入,产生渐变效果。我希望它们全部同时开始。
我怎样才能让它们同时具有动画效果?
参见Codepen用于 HTML
和 CSS
这是 JS block :
nav.forEach(elem => {
elem.addEventListener('mouseenter', () => {
const subnav = document.querySelectorAll('.subnav-block');
subnav.forEach(sub => {
sub.classList.add('display-block');
setTimeout(() => {
sub.style.opacity = 1;
}, 100);
});
});
elem.addEventListener('mouseleave', () => {
const subnav = document.querySelectorAll('.subnav-block');
subnav.forEach(sub => {
sub.classList.remove('display-block');
sub.style.opacity = 0;
});
});
});
最佳答案
您的 JavaScript 没有问题。所有的子导航都在同时进行动画处理:问题是它们重叠了。使用您现在的 CSS,您的第一个子导航位于其他两个之后,第二个位于第三个之后,如下所示:
[子导航 1 [子导航 2 [子导航 3]]]
您可以使用浏览器的检查元素选项进行验证。
当第二个和第三个子导航变透明时,您可以看到它们后面的第一个子导航,因此它们显得更暗。您需要更改 CSS 以使它们不重叠。
关于javascript - 同时动画导航菜单下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57046193/