JavaScript过渡叠加和不透明

Question

我正在将此叠加层用于搜索功能，并且从javascript可以看出，该叠加层从左侧显示：

 /*/ SEARCH OVERLAY /*/ 

/* Open when someone clicks on the span element */
function openNav() {
  document.getElementById("myNav").style.width = "100%";
}

/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
  document.getElementById("myNav").style.width = "0%";
}

我想创建一个淡入。我尝试将其更改为style.opacity =“ 1”和“ 0”。但这行不通。我将如何创建淡入淡出（过渡0.5s左右），而不是像现在这样从左侧滑动？

Answer 1

通过此CSS方法尝试。

在CSS中

myNav {
    opacity: 0;
    transition: all 0.5s;
}
myNav.active {
    opacity: 1;
}

还有JavaScript中的这个

function openNav() {
  document.getElementById("myNav").classList.add("active");
}

/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
  document.getElementById("myNav").classList.remove("active");
}