Question

这是我的代码..现在可以看到元素5秒，5秒后元素是不可见的。我如何纠正代码并且前5秒是不可见的，并且在5秒后可见。

setTimeout(function() {
  document.getElementById('app').className = 'paa';
}, 5000);

p.paa {
  opacity: 0;
}

<p id="app">Test!</p>

Answer 1

实现这一目标的最简单方法是给它一个隐藏元素的类。当计时器达到五秒时，删除所述类以使其可见。

opacity是CSS3属性，不适用于所有浏览器。 display适用于所有人，但您可以根据需要调整此逻辑以适用于opacity。

setTimeout(function() {
  var el = document.getElementById('app');
  
  removeClass(el, 'hidden');
}, 5000);

function removeClass(el, className) {
  if (el.classList) {
    el.classList.remove(className);
  } else {
    el.className = el.className.replace(new RegExp('(^|\\b)' +
        className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
  }
}

p.hidden {
  display: none;
}

<p id="app" class="hidden">Test!</p>

Answer 2

在HTML中，您可以在开始时使用paa课程

<p id="app" class="paa">Test!</p>

然后你可以在5秒后删除课程

setTimeout(function(){
    document.getElementById('app').className.replace("paa", "");
}, 5000);

Answer 3

扭转它！如果你不理解你的代码，你必须在将来遇到问题。

 <p id="app">show and hide</p>

CSS

 #app { opacity: 0; }
 .paa { opacity: 1; }

JS

 setTimeout(function() {
    document.getElementById('app').className = 'paa';
 }, 5000);

等待5秒钟并查看文字

3 个答案: