javascript - 如何在使用带有按钮的 JavaScript 时淡化文本

Question

我已经有了按钮的功能，但我不知道我需要添加什么来让它淡入

myFunction = () => {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

我需要创建一个新功能还是可以将其添加到我现有的功能中？ 这是我的 CSS

 opacity: 1;
  transition: 0.7s opacity;
}

#h3.fade {
    opacity: 0;
    transition: none;
}

可以看到整个代码here .

Answer 1

你的问题是你正在删除过渡，所以它导致它不过渡，而只是跳跃。一直保持过渡，只改变不透明度:

const target = document.querySelector('#target');
document.querySelector('button').addEventListener('click', () => {
  target.classList.contains('fade') 
    ? target.classList.remove('fade') 
    : target.classList.add('fade');
});

#target {
  transition: 1s opacity;
  opacity: 1;
  width: 100px;
  height: 50px;
  background: #F00;
}

#target.fade {
  opacity: 0;
}

<div id="target"></div>
<button>Toggle</button>