我正在尝试div
使用纯JavaScript来使fadeOut效果。
这是我目前正在使用的:
//Imagine I want to fadeOut an element with id = "target"
function fadeOutEffect()
{
var fadeTarget = document.getElementById("target");
var fadeEffect = setInterval(function() {
if (fadeTarget.style.opacity < 0.1)
{
clearInterval(fadeEffect);
}
else
{
fadeTarget.style.opacity -= 0.1;
}
}, 200);
}
div应该平滑淡出,但立即消失。
怎么了?我该如何解决?
最初,当没有设置不透明度时,该值将为空字符串,这将导致您的算术失败。也就是说,"" < 0.1 == true
您的代码进入了clearInterval
分支。
您可以将其默认设置为1,它将起作用。
function fadeOutEffect() {
var fadeTarget = document.getElementById("target");
var fadeEffect = setInterval(function () {
if (!fadeTarget.style.opacity) {
fadeTarget.style.opacity = 1;
}
if (fadeTarget.style.opacity > 0) {
fadeTarget.style.opacity -= 0.1;
} else {
clearInterval(fadeEffect);
}
}, 200);
}
document.getElementById("target").addEventListener('click', fadeOutEffect);
#target {
height: 100px;
background-color: red;
}
<div id="target">Click to fade</div>
在执行算术和比较时,空字符串似乎被JavaScript视为0(即使在CSS中,该空字符串也被视为完全不透明)
> '' < 0.1
> true
> '' > 0.1
> false
> '' - 0.1
> -0.1
更简单的方法现在,我们可以使用CSS过渡以更少的代码实现淡出效果
const target = document.getElementById("target");
target.addEventListener('click', () => target.style.opacity = '0');
// If you want to remove it from the page after the fadeout
target.addEventListener('transitionend', () => target.remove());
#target {
height: 100px;
background-color: red;
transition: opacity 1s;
}
<p>Some text before<p>
<div id="target">Click to fade</div>
<p>Some text after</p>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句