-1

请告知我是否感到困惑，但是否有任何转变可见性的意义？当然，不透明度会产生整洁的效果。但是 none to block 的更改将立即从 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;
}
4

1 回答 1

4

是的，在visibility. 如果您只是opacity在一个元素上使用，该元素将仍然存在，并且会阻止对其下方的任何内容的点击和悬停效果。使用visibility: hidden，元素将不再可见（类似于opacity: 0），但无法单击。

这是一个链接，有助于更详细地解释为什么使用visibilityandopacity可能是必要的，以及如何正确地这样做：http ://www.greywyvern.com/?post=337

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

于 2012-08-04T21:28:17.373 回答