js 获取元素让元素消失_使元素消失（和重新出现）的四种方法

js 获取元素让元素消失

As web pages become more active and dynamic, we desire content to appear and disappear at will. There are four CSS properties commonly used to accomplish this.

随着网页变得更加活跃和动态，我们希望内容随意出现和消失。 通常有四个CSS属性用于完成此操作。

Each technique has its uses, along with its own advantages and disadvantages. It’s also common to employ more than one technique at the same time; where appropriate, I have linked to examples.

每种技术都有其用途，也有其自身的优点和缺点。 同时使用多种技术也是很常见的。 在适当的情况下，我已链接到示例。

I’ll be applying the CSS in each example to the same basic code:

我将在每个示例中将CSS应用于相同的基本代码：

<p>Dice used for traditional Dungeons &amp; Dragons games
are actually reflections of the five Platonic solids: the tetrahedron (4 sided die),
octahedron (8 sides), dodecahedron (12)and icosahedron (20 sides).
<img src="dice.jpg" alt=”Photograph of metal dice" id="dice">
<p>The dice are used to determine the attributes of characters, 
and the character’s success or failure in undertaking tasks, challenges,
casting spells, attacks and defences.

The original CSS applied to the image:

原始CSS应用于图片：

img#dice {
	float: right;
	margin-left: 2em;
}

The techniques are:

这些技术是：

可见度：隐藏 (visibility: hidden)

img#dice {
	float: right;
	margin-left: 2em;
	visibility: hidden;
}

The obvious choice, and often the first employed. It works – you can’t see the influenced element – but the rest of the page still acts like the element is there; it is simply treated as being invisible, while taking up space.

Used for: “popping” elements in and out of existence, when an animated transition effect is not required.

用于：当不需要动画过渡效果时， “弹出”存在的元素和不存在的元素 。

Countered by: setting the element to visibility: visible.

解决方案：将元素设置为visibility: visible 。

不透明度：0 (opacity: 0)

img#dice {
	float: right;
	margin-left: 2em;
	opacity: 0;
}

Setting

opacity to 0 causes an element to be invisible, in the exact same way that visibility: hidden does. opacity the advantage that, unlike visibility, it can be transitioned and animated .

opacity设置为0会导致元素不可见，其方式与“ visibility: hidden ”完全相同。 opacity的优点是，与visibility不同，它可以过渡和动画化 。

Used for: creating “fade in” and “fade out” effects.

用于： 创建“淡入”和“淡出”效果 。

Countered by: setting the element to opacity: 1 (or any value greater than 0).

解决方法：将元素设置为opacity: 1 (或任何大于0的值)。

位置：绝对 (position: absolute)

img#dice {
	position: absolute;
	left: -1000px;
}

The oldest and most standardized of the techniques. Takes the element out of the flow of the page, causing it to layer above ordinary content. Using a high negative

left value takes it off the page entirely.   float and margin are irrelevant with position: absolute, so they are removed.

left值取它完全关闭的页面。 float和margin与position: absolute无关，因此将其删除。

Used for: Linear animation; “pop” placement of elements with the greatest compatibility between browsers.

用于：线性动画； 在浏览器之间具有最大兼容性的元素“弹出”放置 。

Countered by: setting the left position to a value that allows the element to be seen on the page.

解决方法：将left位置设置为一个值，以使该元素在页面上可见。

显示：无 (display: none)

img#dice { display: none; }

The second-oldest of the techniques. Might be thought of as a compromise between

position: absolute and visibility: hidden; the element is both invisible and no longer influences other content on the page.

position: absolute和visibility: hidden ； 元素既不可见，也不再影响页面上的其他内容。

Used for: stylesheets for alternative media, to eliminate inappropriate content; as a way of “collapsing” content around an element that will be “pushed” when it re-appears, as in an accordion menu.

用于： 用于替代媒体的样式表 ，以消除不适当的内容； 作为一种在元素周围“折叠”内容的方法，当元素再次出现时将被“按下”，例如在手风琴菜单中 。

Countered by: setting the element to display: block or any other value.

抵消者：将元素设置为display: block或任何其他值。

There are other ways of making elements vanish – for example, you could use scale to diminish the apparent size of an element until it is invisible – but on the whole they have the same effect as those I have described here. (scale will retain the original space of the element, just as opacity: 0 and visibility: hidden do).

还有其他使元素消失的方法-例如，您可以使用scale来减小元素的外观大小，直到它不可见为止-但总体上，它们具有与我在此描述的效果相同的效果。 ( scale将保留元素的原始空间，就像opacity: 0和visibility: hidden一样)。

翻译自: https://thenewcode.com/304/Four-Ways-to-Make-Elements-Disappear-and-Reappear

js 获取元素让元素消失