隐藏CSS元素而不更改显示属性

Question

我希望保留一个保留初始显示的元素，但这是隐藏的(一开始)。我知道还有用CSS隐藏元素的其他方法，但我也不希望元素首先占用空间。作为一个例子

.target_element {
    display: table;
}

// event happens later...
$('.loader').hide()
$('.target_element').show()

有办法做到这一点吗？我不想将display设置为'none‘，然后返回到JS中的“table”，当我想显示它时。

Answer 1

有几种方法。要么您可以让元素position: absolute或position: fixed不占用任何空间，然后使用任何visibility: hidden、opacity: 0等等。您需要注意的一件事是，如果它们没有display: none，它们仍然可以接收单击事件，所以使用pointer-events: none来停止它。

我喜欢的组合是：

#myElement {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

然后当你想展示它时：

$("#myElement").css({
  'position': 'static',
  'opacity': 1,
  'pointer-events': 'all'
})

这里的好处是您可以转换不透明度，而不是visibility或display。

Answer 2

除非我误解了你的问题，否则display:none;绝对是该走的路。如果您的问题是.show()将其切换为display:block;，那么只需使用jQuery将类添加到元素。

​

setTimeout(function() {
  $('table').addClass('visible');
}, 2000);

table {
  display:none;
}
  table.visible {
    display:table;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td>Test</td><td>Test</td></tr>
  <tr><td>Test</td><td>Test</td></tr>
  <tr><td>Test</td><td>Test</td></tr>
  <tr><td>Test</td><td>Test</td></tr>
</table>

​

Answer 3

您想隐藏元素多长时间？

这样做有多种方法，您可以在浏览器中设置cookie，也可以使用Javascript函数(如setTimeout )在固定时间后显示元素。

setTimeout( function() {
   $("#your_element").show();
   }, 5000); // Time in milliseconds