如何使用纯JavaScript制作淡出效果

我正在尝试使用纯JavaScript为

div

制作淡出效果

这是我目前正在使用的：

//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);
}

//假设我想要淡出id=“target”的元素
函数淡出效果（）
{
var fadeTarget=document.getElementById（“目标”）；
var fadeEffect=setInterval（函数（）{
if（fadeTarget.style.opacity<0.1）
{
清除间隔（fadeEffect）；
}
其他的
{
fadeTarget.style.opacity-=0.1；
}
}, 200);
}

div应该会逐渐淡出，但会立即消失

怎么了？我怎样才能解决它

---

最初，当没有设置不透明度时，该值将是一个空字符串，这将导致算术失败。也就是说，

”<0.1==true

并且您的代码进入

clearInterval

分支

您可以将其默认为1，这样它就可以工作了

函数淡出效果（）{
var fadeTarget=document.getElementById（“目标”）；
var fadeEffect=setInterval（函数（）{
如果（！fadeTarget.style.opacity）{
fadeTarget.style.opacity=1；
}
如果（fadeTarget.style.opacity>0）{
fadeTarget.style.opacity-=0.1；
}否则{
清除间隔（fadeEffect）；
}
}, 200);
}
document.getElementById（“目标”）.addEventListener（“单击”，淡出效果）
#目标{
高度：100px；
背景色：红色；
}
单击淡入淡出
您可以使用CSS转换属性，而不是在javascript中执行vai定时器。与您正在做的相比，这更注重性能

检查

就在今天早上，我在找到了这段代码，它非常简单、紧凑、快速：

var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();

#东西{
背景：红色；
线高：40px；
}
我将淡出…
看起来你可以用另一种方法来做（我可能错了）

除了公认的答案，我们现在有了一个基本上向JavaScript添加动画API的方法

比如说,


/**
*@返回{Object}
*/
函数defaultFadeConfig（）{
返回{
“线性”，
迭代次数：1，
方向：“正常”，
填写：'向前'，
延迟：0，
结束延迟：0
}  
}
/** 
*@param{HTMLElement}el
*@param{number}durationnms
*@param{Object}config
*@returns{Promise}
*/
异步函数淡出（el，durationInMs，config=defaultFadeConfig（））{
返回新承诺（（解决，拒绝）=>{
常量动画=el.animate([
{不透明度：'1'}，
{不透明度：“0”，偏移量：0.5}，
{不透明度：“0”，偏移量：1}
]，{duration:durationnms，…config}）；
animation.onfinish=（）=>resolve（）；
})
}
/** 
*@param{HTMLElement}el
*@param{number}durationnms
*@param{Object}config
*@returns{Promise}
*/
异步函数fadeIn（el，durationnms，config=defaultFadeConfig（））{
返回新承诺（（解析）=>{
常量动画=el.animate([
{不透明度：'0'}，
{不透明度：“0.5”，偏移量：0.5}，
{不透明度：“1”，偏移量：1}
]，{duration:durationnms，…config}）；
animation.onfinish=（）=>resolve（）；
});
}
addEventListener（'load'，async（）=>{
const el=document.getElementById（'el1'）；
对于（以“不可剥夺的权利”为例）分割（“”）{
等待衰减（el，1000）；
el.innerText=ipsum；
等待法丹（el，2000年）；
}
});
。文本中心{
文本对齐：居中；
}
…
函数淡出效果（）{
var fadeTarget=document.getElementById（“目标”）；
var fadeEffect=setInterval（函数（）{
如果（！fadeTarget.style.opacity）{
fadeTarget.style.opacity=1；
}
如果（fadeTarget.style.opacity>0）{
fadeTarget.style.opacity-=0.1；
}否则{
清除间隔（fadeEffect）；
}
}, 200);
}
document.getElementById（“目标”）.addEventListener（“单击”，淡出效果）
#目标{
高度：100px；
背景色：红色；
}
单击以淡入淡出
您是否看到代码中显示jsbin的9个错误？如果您没有手动设置
样式
，请检查
淡入淡出.style.opacity
，并清空它？My jsbin没有任何错误。您的jsbin显示9错误，如：第27行：需要一个条件表达式，但看到了一个赋值。My jsbin的控制台是空的。虽然这是一个有效点，但应该是一个注释，OP想知道他们的代码出了什么问题，它非常接近working@JuanMendes我是新来的。我没有足够的分数来添加评论。我只能在我的问答中发表评论。另外：为什么不透明度停止在0.1而不是0？只需将
fadeTarget.style.opacity<0.1
更改为
fadeTarget.style.opacity==0
@Anakin fixed，在这种情况下，因为我知道它是从1开始的，例如，如果它在.91处启动，它将失败。如果您在执行期间切换页面，则此代码段在未定义的fadeTarget上失败。在尝试访问它之前，您应该检查是否为null fadeTarget。@并非所有人都希望它停止占用空间。你也可以从DOM中删除它，我更喜欢OP的代码，看起来vanilla js试图赢得一个模糊上下文。我喜欢那个网站，虽然我可能会说是小型化比赛，在移动互联网速度为64 kbit/s或更低的时代，小型化还是很好的。@My1为了不缩小你在答案中发布的内容，你让小型化者这样做，以生产编解码器转换工作，它甚至在现实生活中工作得更好。但是，我想要一个纯基于javascript的动画。为什么是@Anakin？CSS比JS定时器效率更高。
event.target.style.transition = '0.8s';
event.target.style.opacity = 0;