时间戳

首页 > 技术文章 > 元素隐藏方法总结：

元素隐藏方法总结：

bobo1 2020-02-27 01:58 原文

  1. 如果希望元素不可见、不占据空间、资源会加载、DOM 可访问：display: none；

  2. 如果希望元素不可见、不能点击、但占据空间、资源会加载，可以使用：visibility: hidden；

  3. 如果希望元素不可见、不占据空间、显隐时可以又transition淡入淡出效果：

div{
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s linear;
  background: cyan;
}
div.active{
  visibility: visible;
  opacity: 1;
}
 

这里使用visibility: hidden而不是display: none，是因为display: none会影响css3的transition过渡效果。
但是display: none并不会影响cssanimation动画的效果。

    1. 如果希望元素不可见、可以点击、占据空间，可以使用：opacity: 0；

    2. 如果希望元素不可见、可以点击、不占据空间，可以使用：opacity: 0; position: abolute;；

    3. 如果希望元素不可见、不能点击、占据空间，可以使用：position: relative; z-index: -1;；

    4. 如果希望元素不可见、不能点击、不占据空间，可以使用：position: absolute ; z-index: -1;；

推荐阅读