如何讓文本在每次點擊時淡入，而不僅僅是第一次使用 css 過渡和 JavaScript？
這是我到目前為止所擁有的
<style>
#data {
transition: .7s;
}
</style>
<h1 id="data"></h1>
<a href="#" id="clicker">click 1</a>
document.getElementById('data').style.opacity = 0;
function go(event){
event.preventDefault();
document.getElementById('data').style.opacity = 1;
document.getElementById('data').innerHTML = 'test';
}
document.getElementById('clicker').addEventListener('click', go);
uj5u.com熱心網友回復：
也可以使用Element.animate()來完成：
const dataElement = document.getElementById('data')
dataElement.style.opacity = 0
function go(event) {
event.preventDefault()
dataElement.animate({
opacity: [0, 1]
}, 700).onfinish = () => dataElement.style.opacity = 1
}
document.getElementById('clicker').addEventListener('click', go)<h1 class="fade-in" id="data">test</h1>
<a href="#" id="clicker">click 1</a>uj5u.com熱心網友回復：
setTimeout可能對你有用。單擊后立即將其設定為不可見并使用setTimeout延遲然后再次顯示。
document.getElementById('data').style.opacity = 0;
document.getElementById('data').innerHTML = 'test';
function go(event){
event.preventDefault();
document.getElementById('data').style.opacity = 0;
setTimeout(() => {
document.getElementById('data').style.opacity = 1;
}, 1000);
}
document.getElementById('clicker').addEventListener('click', go);#data {
transition: .7s;
}<h1 id="data"></h1>
<a href="#" id="clicker">click 1</a>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/347298.html
標籤：javascript html
上一篇：CentOS/Redflag 7.3安裝qemu 5.0記錄
下一篇：如何將我的內容集中在我的網頁中？