在我的專案中，我有一個按鈕，我想在某些條件下顯示和隱藏。當按鈕被隱藏時，它仍然應該占用空間（意思是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：
可見性值在可見和不可見之間插值。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/408394.html
標籤：
上一篇：使用DOM事件使文本變為粗體