css 利用visibility属性来让元素消失

by · 2018年12月08日 · 241 Words · ~1min reading time | Improve on


原文链接： css 利用visibility属性来让元素消失

一个小的技巧：隐藏元素并消失

如果我们想隐藏一个元素，并实现过渡的效果。我们可能会用jQuery的fadeOut(), 也可以用css3的的opacity。当我们通过opacity隐藏元素后通常会设置这个元素display: none。在什么时机设置display: none便成了关键。

这个可以利用visibility属性来让元素消失，而不是display: none:

.m-fadeOut {
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 300ms, opacity 300ms;
}
.m-fadeIn {
visibility: visible;
opacity: 1;
transition: visibility 0s linear 0s, opacity 300ms;
}
这里的关键在于： transition可以运用在visibility属性上

Tags:

`