Javascript 动画中的图像滑块淡入淡出

我正在为我的一个项目制作一个图像滑块，我被卡在这里了——每次我点击缩略图，主图像都会出现一些淡入动画。你知道我哪里做错了。第一次加载页面时，会应用类“fadein”，但在它保持不变后，fadein不起作用。有线索吗

HTML

var el=document.getElementById（“ImageSlider”）；
//var removefadein=document.querySelector（“.fade-in”）；
功能imgSlider（新图像）{
el.src=新图像；
//el.classList.add（“淡入”）；
}
//el.延迟（'5000'）。类列表。删除（“淡入”）；
//移除（“淡入”）
*{
保证金：0；
填充：0；
框大小：边框框；
字体系列：“Nunito”，无衬线；
字号：18px；
}
h1、h2、h3、h4、h5、h6{
字体系列：“非衬线”，衬线；
}
部分{
位置：相对位置；
宽度：100%；
高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
第#节图像滑块{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
对象匹配：覆盖；
}
第ul节缩略图{
位置：绝对位置；
底部：50px；
左：50%；
显示器：flex；
转化：translateX（-50%）；
证明内容：中心；
对齐项目：居中；
列表样式：无；
z指数：999；
}
第ul节缩略图li{
边缘：1米；
光标：指针；
}
第ul节缩略图{
边框：2件纯黑；
最大高度：5公分；
填充：0；
保证金：0；
}
.淡入{
动画：Fadein4S；
-moz动画：fadein 4s；/*Firefox*/
-webkit动画：fadein 4s；/*Safari和Chrome*/
-o-animation:fadein 4s；/*Opera*/
}
@关键帧淡入淡出{
从{
不透明度：0；
}
到{
不透明度：1；
}
}





不太清楚这背后的逻辑，但这里有一个可行的解决方案：
也许其他人能更好地解释

修复逻辑是，您必须单击：

再次获取元素
检查不透明度，如果其大于0，则将其设置回0
移除淡入等级并重新应用，稍微延迟（不能与移除同时生效）
我认为您的问题在于，您有0-1中的可见元素在加载。然后你没有将它设置回0，你的动画类没有这样做，它只是说从0到1设置动画，但是没有从0开始。
var el=document.getElementById（“ImageSlider”）；
功能imgSlider（新图像）{
el=document.getElementById（“ImageSlider”）；
el.src=新图像；
console.clear（）；
log（window.getComputedStyle（el.opacity）；
if（window.getComputedStyle（el）.opacity>0）{
console.log（true）；
el.style.opacity=0；
el.类列表。删除（“淡入”）；
setTimeout（函数（）{
el.classList.add（“淡入”）；
el.style.opacity=1；
}, 100);
}
}
*{
保证金：0；
填充：0；
框大小：边框框；
字体系列：“Nunito”，无衬线；
字号：18px；
}
h1，
h2，
h3，
h4，
h5，
h6{
字体系列：“非衬线”，衬线；
}
部分{
位置：相对位置；
宽度：100%；
高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
第#节图像滑块{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
对象匹配：覆盖；
}
第ul节缩略图{
位置：绝对位置；
底部：50px；
左：50%；
显示器：flex；
转化：translateX（-50%）；
证明内容：中心；
对齐项目：居中；
列表样式：无；
z指数：999；
}
第ul节缩略图li{
边缘：1米；
光标：指针；
}
第ul节缩略图{
边框：2件纯黑；
最大高度：5公分；
填充：0；
保证金：0；
}
.淡入{
动画：Fadein4S；
-moz动画：Fadein4S；
/*火狐*/
-webkit动画：fadein4s；
/*狩猎与铬*/
-o-animation:fadein4s；
/*歌剧院*/
}
@关键帧淡入淡出{
从{
不透明度：0；
}
到{
不透明度：1；
}
}