如何在没有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中使框褪色？

回答

相关问题