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);
}

我不介意是否使用不透明度或背景或其他任何东西来控制褪色，我只是不知道还能做什么。

Answer 1

CSS 过渡似乎不支持 显示属性（另请参阅 这个所以问题）。

考虑到这一点，您有多种选择。您最初可以在预转换中将宽度/高度设置为 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);
}

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;
}

Answer 3

您可以使用 clip 而不是显示，因为该元素是绝对定位的

工作示例

例如，

.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 无论如何都不进行转换，如果您愿意，您可以向其提供显示代码，但这种方式可以使它们保持不变;)

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 几乎具有相同的效果，但是现在过渡应该可以正常进行。