过渡中的可见性是什么？

Question

如果我感到困惑，请告诉我，但在可见性上进行转换有什么意义吗？当然，不透明度会产生整洁的效果。但没有人可以阻止的变化将立即从nada变为full。也许我们可以在一段时间内的某个时间内传播它的发生，但这种转变会同时发生。还是我错了？

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

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: hidden是不可见的，但是仍然占据空间。具有display: none的元素不可见，但不占用空间。