时间戳

首页 > 解决方案 > 如何使 InnerHTML 淡出

javascript - 如何使 InnerHTML 淡出

问题描述

当用户点击一个按钮时，它会出现一些带有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>

标签： javascripthtmlcss

解决方案

除了部分事件侦听器之外，这似乎对我有用。您检查一个元素是否包含 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");
  }
});

推荐阅读