javascript - 如何使 InnerHTML 淡出

Question

当用户点击一个按钮时，它会出现一些带有 innerHTML 的文本，并且已经添加了 fadeIn 和 fadeOut，但是我想要做的是当用户点击按钮外部时文本消失，我已经实现了消失文本，但如何向其添加淡出效果。

我尝试通过更改淡入和淡出。

JS

function some() {
  var textElement = document.getElementById("text1");
  textElement.className = "fadeIn2";
  textElement.innerHTML = "";
  textElement.focus();
  textElement.className = "fadeOut2";
}

window.addEventListener("click", function(e){   
  if (document.getElementById("1").contains(e.target)){
    // Clicked in box
    console.log("Foo");
  } else {
    some(); //function some is called
    console.log("Bar");
  }
});

CSS

.fadeIn2 {
  opacity: 1;
}
.fadeOut2 {
  opacity: 0;
  transition: all 1.5s;
  -webkit-transition: all 1.5s;
  -moz-transition: all 1.5s;
  -ms-transition: all 1.5s;
  -o-transition: all 1.5s;
}

HTML

<button>Click me</button>

Answer 1

除了事件监听器的一部分之外，这似乎对我有用。您检查元素是否包含 e.target，而实际上您应该检查元素是否等于 e.target:

window.addEventListener("click", function(e){   
  if (e.target === document.getElementById("1")) {
    console.log("clicked in box");
  } else {
    some();
    console.log("didn't click in box");
  }
});