javascript - 单击其中的按钮后如何淡出div？

Question

我想有很多 div 元素，每个元素里面都有自己的“按钮”元素。当按钮被点击时，包含它的 div 应该慢慢淡出。

我首先通过在“onclick”事件中传递“button”元素(将是 div 元素)的父元素来测试这个想法。调用的函数将不透明度存储在一个变量中，如果不透明度大于 0，则将其减少 0.1。每次单击 div 中的“按钮”直到它变为零和 <div> 时都可以看到这种效果。消失了。

我想在看起来像动画的一段时间内自动实现这一点，所以我想到在调用的主函数中使用 setTimeout 或 setInterval 函数。但是，代码会立即执行，就好像 javascript 只是忽略了计时器一样。我包含了一个 console.log 来打印不透明度的值。我可以看到它们立即计算为 0。(setInterval 对我来说也失败了)这就像我在函数内部将“显示”属性设置为“无”一样。

var btn = document.getElementById("start");
var timerID = 0;

function hide(elem) {
  var opacity =
    Number(window.getComputedStyle(elem).getPropertyValue("opacity"));
  if (opacity > 0) {
    opacity = opacity - 0.1;
    console.log(opacity);
    elem.style.opacity = opacity;
    /* you can simply comment out the setTimeout function  and see that the 
    opacity reduces on every click of the <button> */
    setTimeout(hide(elem), 2000);
  } else {
    clearTimeout(timerID);
  }
}

.box {
  height: 250px;
  width: 250px;
  background: red;
}

<div class="box">
  <button id="start" onclick="hide(this.parentNode)">CLICK 
    ME</button>
</div>

Answer 1

您可以只使用 css 转换。

function hide(elem) {
  elem.classList.add("fade-out")
}

.box {
  height: 250px;
  width: 250px;
  background: red;
}

.fade-out {
    -webkit-transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    -ms-transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out;
     opacity: 0;
}

<div class="box">
  <button id="start" onclick="hide(this.parentNode)">CLICK 
    ME</button>
</div>