javascript - 不透明度过渡 css 动画从高到低起作用，但反之亦然

Question

我有一个应该是非常简单的问题，也许是我看不到的拼写错误。我有一个页面拦截器，它通过不透明度过渡使页面变灰，并在我启动表单时阻止任何点击。这在 hideForm 中有效，但在 showForm 中无效，它立即变为 0.4 不透明度。很奇怪，因为他们所做的只是彼此相反，在 hideForm 中设置超时以在不透明度转换完成时将其设置为不显示。

我认为这最终将成为一个简单的解决方案，最终我会被要求删除问题，我很乐意这样做，但我已经尝试解决这个问题太久了，我需要第二对眼睛。

我尽量减少显示的代码量，但如果有人问我会发布更多代码。

#pageCover {
    opacity: 0;
    -moz-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
    display:none
}

效果很好

    function hideForm() {
        if (form.style.top > '0px') {
            pageCover.style.opacity = 0.0;
            setTimeout(function () { pageCover.style.display = 'none'; }, 1000);
        }
    }

这会显示 pageCover 但会忽略过渡并直接转到 0.4。过渡如何以一种方式工作，而不是以相反的方式工作？我很难过。

    function showForm() {
        if (form.style.top < '0px') {
            pageCover.style.opacity = 0.4;
            pageCover.style.display = 'block';
        }
    }

Answer 1

不透明度属性动画但不是“显示”属性。当它们同时设置时，将不会观察到不透明度过渡。您可以玩弄数字，但为了说明起见，让我们在两个操作之间添加 10 毫秒的间隔:

pageCover.style.display = 'block';
setTimeout(function(){
  pageCover.style.opacity = 0.4;
},10);

您甚至可以将数字推到 0，但浏览器可能会将其“优化”掉。

实例:

const pageCover = document.getElementById("pageCover");

function hideForm() {
    pageCover.style.opacity = 0;
    setTimeout(function () {
      pageCover.style.display = 'none';
    }, 1000);
}

function showForm() {
    pageCover.style.display = 'block';
    setTimeout(function () {
      pageCover.style.opacity = 0.4;
    }, 10);
}

document.getElementById("btn-show").addEventListener("click", showForm);
document.getElementById("btn-hide").addEventListener("click", hideForm);

#pageCover {
    opacity: 0;
    -moz-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
    display: none;
}

<div id="pageCover">
  This is the page cover
</div>
<input type="button" id="btn-show" value="Show">
<input type="button" id="btn-hide" value="Hide">