如何在沒有J查詢的情況下在EventListener中使框褪色？

我在「button3」上做這個淡出工作時遇到了麻煩。我從opacity = 10開始，嘗試在定時器上將其設置爲0.0。我發現淡入淡出的每個答案都在eventListener之外，有什麼建議？如何在沒有J查詢的情況下在EventListener中使框褪色？

來源

2017-07-18 Jason N

請張貼帶編輯器的代碼而不是代碼圖片。 – T4rk1n

請看第一個[如何問]（https://stackoverflow.com/help/how-to-ask） SO是一個平臺，您可以從中獲得有關您問題的良好建議。但爲此，你需要更具體地瞭解你在問什麼？到目前爲止你做了什麼？在提出請求之前，請查看建議的SO問題並查看它們。儘管如此，你還是沒有找到解決方案，那麼你可以在這裏問一個問題。 –

它是否在事件監聽器中是無關緊要的：在監聽器外部工作的淡入淡出代碼也可以在內部工作。你的函數的問題是你只是使用一個簡單的'for'循環，在瀏覽器重新繪製之前它將運行完成。相反，使用'setTimeout（）' - 基於僞循環。 – nnnnnn

最簡單的事情是添加了持續時間來那箱CSS過渡，然後單擊時的不透明度設置爲0。這會導致它淡出。

CSS：

#button3{ transition: all 2s linear; }

JS：

document.getElementById("button3").addEventListener("click", function(){ box.style.opacity = 0; });

來源

2017-07-18 03:35:34 Bricky

你需要做的是使用setInterval然後clearInterval當目標是完全可見（不透明度= 1），或完全隱藏（不透明度= 0）。下面的解決方案僅僅是JavaScript的：

const btn = document.getElementById('btn-toggle-fade'); 
 

 
btn.addEventListener('click', (e) => { 
 
\t const target = document.querySelector(e.target.dataset.target); 
 
    
 
    // Set default opacity value 
 
    if (!target.style.opacity) { 
 
    \t target.style.opacity = 1; 
 
    } 
 
    
 
    if (Number(target.style.opacity) === 1) { 
 
    \t const fadeOut = setInterval(() => { 
 
    \t if (Number(target.style.opacity) < 0.1) { 
 
     \t clearInterval(fadeOut); 
 
     } else { 
 
     \t target.style.opacity = Number(target.style.opacity) - 0.1; 
 
     } 
 
    }, 100); 
 
    } else { 
 
    \t const fadeIn = setInterval(() => { 
 
    \t if (Number(target.style.opacity) < 1) { 
 
     \t target.style.opacity = Number(target.style.opacity) + 0.1; 
 
     } else { 
 
     \t clearInterval(fadeIn); 
 
     } 
 
    }, 100); 
 
    } 
 
});

#my-div { 
 
    background: #000; 
 
    color: #fff; 
 
    height: 100px; 
 
    line-height: 100px; 
 
    width: 200px; 
 
    text-align: center; 
 
}

<button id="btn-toggle-fade" data-target="#my-div"> 
 
    Toggle Fade 
 
</button> 
 
<div id="my-div"> 
 
    Hello 
 
</div>

但是，說實話，我認爲以下（與CSS轉換）是更好的：

const btn = document.getElementById('btn-toggle-fade'); 
 

 
btn.addEventListener('click', (e) => { 
 
\t const target = document.querySelector(e.target.dataset.target); 
 
    
 
    if (target.classList.contains('visible')) { 
 
    \t target.classList.remove('visible'); 
 
    target.classList.add('hidden'); 
 
    } else { 
 
    \t target.classList.remove('hidden'); 
 
    target.classList.add('visible'); 
 
    } 
 
});

#my-div { 
 
    background: #000; 
 
    color: #fff; 
 
    height: 100px; 
 
    line-height: 100px; 
 
    width: 200px; 
 
    text-align: center; 
 
} 
 

 
.visible { 
 
    opacity: 1; 
 
    transition: opacity 2s linear; 
 
    visibility: visible; 
 
} 
 

 
.hidden { 
 
    opacity: 0; 
 
    transition: visibility 0s 2s, opacity 2s linear; 
 
    visibility: hidden; 
 
}

<button id="btn-toggle-fade" data-target="#my-div"> 
 
    Toggle Fade 
 
</button> 
 
<div id="my-div" class="visible"> 
 
    Hello 
 
</div>

來源

2017-07-18 03:53:09 dork

如何在沒有J查詢的情況下在EventListener中使框褪色？

回答

相關問題