我有这个带有菜单链接 (#navBtn) 和 #mobileLinks div
的页面,它在单击 #navBtn
时打开和关闭。
我想在 #mobileLinks div
打开时添加淡入动画,在 #mobileLinks div
关闭时添加淡出动画。我想用纯 JavaScript 来实现这一点。
我已经成功地插入了淡入动画,但不知道如何添加淡出动画。
var content = document.getElementById("mobileLinks");
var button = document.getElementById("navBtn");
button.onclick = function(){
if(content.className == "open"){
content.className = "";
content.animate([{opacity:'0.0'}, {opacity:'1.0'}],
{duration: 1500, fill:'forwards'})
} else{
content.className = "open";
}
};
#navBtn
#mobileLinks {
display: none
}
#mobileLinks.open {
display: flex;
}
最佳答案
您可以完全在 CSS 中处理样式,并且只用 Js 切换一个类。
使用 CSS 和 Js
const menu = document.getElementById("menu")
function toggleMenu() {
menu.classList.toggle("isOpen");
}
#menu {
opacity: 0;
transition: opacity 0.2s ease-out;
}
#menu.isOpen {
opacity: 1;
}
<a onClick="toggleMenu()">menu</a>
<nav id="menu">
<a>link</a>
<a>link</a>
</nav>
或仅使用 JS
const menu = document.getElementById("menu")
menu.style.opacity = '0'
menu.style.transition = "opacity 0.2s ease-out"
function toggleMenu() {
// Toggle between 0 and 1
menu.style.opacity ^= 1;
}
<a onClick="toggleMenu()">menu</a>
<nav id="menu">
<a>link</a>
<a>link</a>
</nav>
关于javascript - 打开和关闭 Div 元素时添加动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55631085/