在我的项目中，我有一个按钮，我想在某些条件下显示和隐藏。当按钮被隐藏时，它仍然应该占用空间（意思是display: none;不是我想要的）但它不应该是可见的，并且用户不应该能够与之互动。改变可见性可以满足我的一切需求，但它会立即出现和消失，我希望有一个平稳的过渡。使用不透明度时，我可以设定过渡持续时间，但是当鼠标悬停在按钮上时，游标仍会变为指标。偶然地，我发现我可以简单地将这两件事结合起来得到想要的结果：当我点击示例中的按钮时，它会慢慢淡出，但一旦消失，我就无法再与它互动了。但是，我不明白为什么它会这样作业，因为可见性会立即改变，而且我也不知道它是否在所有主要浏览器中都这样作业。有人可以帮我回答这两个问题吗？

function hide() {
  document.querySelector("button").style.visibility = "hidden";
  document.querySelector("button").style.opacity = "0";
}

button {
  transition-duration: 1s;
}

<button onclick="hide()">This is a test.</button>

uj5u.com热心网友回复：

您可以使用不透明度和指标事件。另外请不要将 javascript 用于 css 内容。在我的示例中，我添加了一个类。

const button = document.querySelector('.js-disable')

button.addEventListener('click', function() {
  button.classList.add('button--is-disabled')
})

.button {
  background-color: #ededed;
  padding: .5rem 1rem;
  border: none;
}

.button--is-disabled {
  opacity: 0;
  pointer-events: none;
  transition: opacity 2s;
}

<button class="button js-disable">Click me</button>

uj5u.com热心网友回复：

问题基本上是：当可见性立即改变时，为什么这会起作用。

这实际上是不正确的。可见性是插值的，当您对所有内容都设定了过渡时，可见性将会过渡。

显然它不能有连续的值，但它会逐步“选择”可见或隐藏的值，这是您指定的两个端点。它改变的地方由计时功能决定。

所以，你的代码作业得很好。元素随着不透明度逐渐消失，并且在某个点（在缓动计时功能的情况下接近结束）它将从可见切换到隐藏。

参见例如MDN：

可见性值在可见和不可见之间插值。