Question

请告知我是否感到困惑，但有没有关于可见度转换的观点？确定，不透明度会产生一种整洁的效果。但是没有阻止的改变将立即从虚无...到完全。也许我们可以在一个时间间隔内扩展其出现某个时间，但转换将同时发生。或者我错了？

这是我正在创建的代码。我应该保留第一种风格的最后三行吗？

div.contentItem{
    border: 2px solid #00bb00;
    border-radius: 20px;
    background-color: Beige;
    padding: 10px;
    -webkit-transition: visibility 3.0s, opacity 3.0s;
    -moz-transition: visibility 3.0s, opacity 3.0s;
    -o-transition: visibility 3.0s, opacity 3.0s;
}

div.contentItemHidden{
    opacity: 0;
}

div.contentItemVisible{
    opacity: 1;
}

之前，我在最后两个子句中有块样式，但实际上已经破坏了不透明度的转换（可能是由于display：none导致元素根本不可操作）。

div.contentItemHidden{
    display: none;
    opacity: 0;
}

div.contentItemVisible{
    display: block;
    opacity: 1;
}

Answer 1

是的，有必要在visibility进行转换。如果您只对元素使用opacity，那么该元素仍将存在，并会阻止点击和悬停效果。使用visibility: hidden时，该元素将不再可见（类似于opacity: 0），但无法点击。

以下链接有助于更详细地解释为什么一起使用visibility和opacity，以及如何正确使用http://www.greywyvern.com/?post=337

作为旁注，我注意到您在问题中提到了visibility，但代码中有display。我想指出visibility和display之间存在差异。特别是，元素visibility: hidden不可见但仍占用空间。 display: none的元素不可见，但不占用空间。

转型中的可见度是什么？

1 个答案: