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转换不支持display属性(也见这个 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);
}