CSS过渡效果无法正常工作？

Question

我在这里尝试的是当鼠标悬停在这个div上时实现一个过渡效果。

一切都很好，只有过渡效果没有出现。我尝试使用过渡属性transition: all、transition: opacity和transition: background，但都无效。

是display属性在起作用。因为当我将它移除时，它有效。那么我该如何解决呢？显然，我要保留display属性，因为它适用于所有浏览器（新旧）。

这是我目前拥有的：

.matrix-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0); /* fallback */
    background: rgba(0,0,0,0);
    color: #fff;
    display: none;
    -webkit-transition: background 2s;
    -o-transition: background 2s;
    -moz-transition: background 2s;
    transition: background 2s;
}

a:hover .matrix-overlay {
    display: block;
    background: rgba(0,0,0,0.5);
}

我不介意使用不透明度、背景或其他方式来控制淡入淡出的效果，只是不知道还有什么别的方法可用。

- Rowan

---

你能设置不透明度吗？有浏览器特定的设置，包括“-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)“；”filter: alpha(opacity=50);“和”-moz-opacity:0.5;“，然后是”-khtml-opacity: 0.5;“，最后是CSS3的”opacity: 0.5;“。 - Piotr Kula

我更喜欢一种方法，让我保留display属性，但如果那是唯一的方法，那我想我必须这样做。 - Rowan

这会修改元素的不透明度，在他的样式表中，他只修改了背景颜色的不透明度。 - scurker

你仍然可以在这两种情况下使用display:block。@scurker..是的，我现在看到了。 - Piotr Kula

那是我的疏忽，我没有意识到文本也不会消失。我现在正在尝试这个解决方案，但还有其他可以尝试并保留“显示”属性的方法吗？ - Rowan

Answer 1

看起来display属性不支持CSS过渡（也请参阅此SO问题）。

有了这个想法，你有几个选择。您可以在预过渡中最初将宽度/高度设置为0，或将元素偏移页面（类似于margin-left：-9999px;），或将不透明度设置为0。

在您的情况下，我可能会使用这个：

.matrix-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0); /* fallback */
    background: rgba(0,0,0,0);
    color: #fff;
    display: block;
    margin-left: -9999px; /* hide element off the page */
    -webkit-transition: background 2s;
    -o-transition: background 2s;
    -moz-transition: background 2s;
    transition: background 2s;
}

a:hover .matrix-overlay {
    margin-left: 0; /* reset element position */
    background: rgba(0,0,0,0.5);
}

- scurker

Answer 2

这是我最终采取的做法：

    .matrix-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0); /* fallback */
    background: rgba(0,0,0,0.7);
    color: #fff;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: opacity 0.2s ease 0s;
    -o-transition: opacity 0.2s ease 0s;
    -moz-transition: opacity 0.2s ease 0s;
    transition: opacity 0.2s ease 0s;
}

a:hover .matrix-overlay {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: opacity 0.15s ease 0s;
    -o-transition: opacity 0.15s ease 0s;
    -moz-transition: opacity 0.15s ease 0s;
    transition: opacity 0.15s ease 0s;
}

- Rowan

Answer 3

你可以使用clip代替display，因为该元素是绝对定位的。

工作示例

例如：

.matrix-overlay {
    ...other properties, not display ...
    clip: rect(1px 1px 1px 1px); /* IE7 */
    clip: rect(1px,1px,1px,1px);

}

a:hover .matrix-overlay {
    ..other properties, not display ...
     clip: rect(auto); /* IE7 */
     clip: auto;
}

我放了一段有趣的IE7代码片段，虽然IE不支持过渡效果，如果你想的话，你可以给它提供显示代码，但这种方式可以保持它们的一致性；）

- clairesuzy

Answer 4

你可以尝试以下方法：

.matrix-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0); /* fallback */
    background: rgba(0,0,0,0.7);
    color: #fff;
    opacity: 0;
    pointer-events:none;
    transition: opacity 0.2s ease 0s;
}

a:hover .matrix-overlay {
    pointer-events:auto;
    opacity: 1;
    transition: opacity 0.15s ease 0s;
}

使用 pointer-events:none 和 opacity:0 一起几乎与 display:none 有相同的效果，但现在过渡应该可以正常工作。

- user2514117