动态添加具有不在chrome中工作的转换持续时间，可见性和不透明度的CSS类

Question

我正在尝试通过动态添加transition-duration, visibility, and opacity的类来进行转换。点击“显示”按钮后，.overlay应在 1秒过渡到red颜色。它在firefox中完美运行，但不在CHROME＆amp; IE9

My chrome version: 31.0.1650.63 m

FIDDLE DEMO >>

HTML

<div class="wrapper">
    <div class="overlay">

    </div>
</div>

<button>Show</button>

CSS

.wrapper {
    width: 500px;
    height: 100px;
    background-color: black;
}

.overlay {
    background-color: red;
    width: 100%; 
    height: 100%;
    visibility: hidden;
    opacity: 0;
}

.show {
    visibility: visible;
    opacity: 1;
    transition-duration: 1s;
}

SCRIPT

document.querySelector('button').addEventListener('click', function() {
    document.querySelector('.overlay').classList.add('show');
});

Answer 1

您可以使用转换：

-webkit-transition-duration: 1s;