javascript - 使用带有 css 转换的 javascript .style

Question

我想要我的 javascript element.style.visibility = 'visible'; 并且我需要它使用我拥有的 CSS 过渡淡入淡出。它目前不会褪色，它只是一个快速过渡。 注意:我需要使用 JS 而不是 jQuery。

JS:

function removeOverlay () {
        var a = document.getElementById('overlay');
        a.style.visibility = 'hidden';
    }
}

// In another function
document.getElementById('overlay').style.visibility = 'visible';

HTML:

<div id='overlay' onclick='removeOverlay()'>
        <span>Please enter a number e.g. 7.50</span>
    </div>

CSS:

#overlay {
    visibility: hidden;
    background-color: rgba(0,0,0,.85);
    top: 0; bottom: 0; left: 0; right: 0;
    z-index: 9999;
    position: absolute;
    -webkit-transition: visibility 0.5s ease;
    transition: visibilty 0.5s ease;
}

#overlay:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}

#overlay span {
    color: white;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    position: relative;
}

谢谢:)

Answer 1

我不认为可见性可以设置动画，因为它只需要 2 个值。你应该使用不透明度。