Javascript 如何在图像之间添加细微的过渡？

我创建了一个问题，并能够让我的滑块工作。现在我需要在图像之间添加平滑过渡。我尝试了CSS中的过渡/动画，但这有一个奇怪的效果-图像之间有一个黑色。我认为过渡属性需要添加到JS中

当前情况-随着图像的突然变化，出现了明显的差异 期望值-我希望图像能够轻松进出

非常感谢您在这方面的任何帮助

注意->此处复制粘贴代码以便于使用：

let line=document.getElementById（“line”）；
行。addEventListener（“输入”，函数（事件）{
setNewImage（event.target.value）；
});
函数setNewImage（值）{
//console.log（值）；
让currentImage=document.getElementsByClassName（“播放”）；
让removedImage=currentImage[0]。类列表。删除（“播放”）；
让imageToAdd=“image”+值；
//控制台日志（imageToAdd）；
让geteltoad=document.getElementsByClassName（imageToAdd）；
//console.log（getElToAdd）；
设newEl=getElToAdd[0]；
newEl.classList.add（“播放”）；
}

.container{
显示器：flex；
证明内容：中心；
弯曲方向：立柱；
背景色：薰衣草；
宽度：400px；
高度：300px；
}
.图像容器{
宽度：380px；
高度：280px；
/*背景颜色：粉红色*/
}
.滚动条{
/*填充：0 5px 5px 0*/
}
.滚动条输入{
宽度：380px；
}
ulli{
列表样式：无；
}
.形象{
宽度：380px；
高度：260px；
显示：无；
}
.玩{
显示：块；
}
.image1{
背景：url（'http://placekitten.com/380/260")不重复;；
}
.image2{
背景：url（'http://placekitten.com/378/260")不重复;；
}
.image3{
背景：url（'http://placekitten.com/380/259")不重复;；
}
.image4{
背景：url（'http://placekitten.com/379/260")不重复;；
}
.image5{
背景：url（'http://placekitten.com/383/260")不重复;；
}
.image6{
背景：url（'http://placekitten.com/380/261")不重复;；
}

使用

不透明度

而不是

显示

来添加过渡，并将元素位置设置为绝对位置，使它们彼此位于上方：

let line=document.getElementById（“line”）；
行。addEventListener（“输入”，函数（事件）{
setNewImage（event.target.value）；
});
函数setNewImage（值）{
//console.log（值）；
让currentImage=document.getElementsByClassName（“播放”）；
让removedImage=currentImage[0]。类列表。删除（“播放”）；
让imageToAdd=“image”+值；
//控制台日志（imageToAdd）；
让geteltoad=document.getElementsByClassName（imageToAdd）；
//console.log（getElToAdd）；
设newEl=getElToAdd[0]；
newEl.classList.add（“播放”）；
}

.container{
显示器：flex；
证明内容：中心；
弯曲方向：立柱；
背景色：薰衣草；
宽度：400px；
高度：300px；
}
.图像容器{
宽度：380px；
高度：280px；
}
.滚动条输入{
宽度：380px；
}
保险商实验室{
位置：相对；/*使其相对于ul而不是li*/
保证金：0；
填充：0；
}
/*加上这个*/
ulli.图像{
位置：绝对位置；
排名：0；
左：0；
}
/**/
ulli{
列表样式：无；
}
.形象{
宽度：380px；
高度：260px；
不透明度：0；
过渡：1s全部；
}
.玩{
不透明度：1；
}
.image1{
背景：url（'http://placekitten.com/380/260")不重复;；
}
.image2{
背景：url（'http://placekitten.com/378/260")不重复;；
}
.image3{
背景：url（'http://placekitten.com/380/259")不重复;；
}
.image4{
背景：url（'http://placekitten.com/379/260")不重复;；
}
.image5{
背景：url（'http://placekitten.com/383/260")不重复;；
}
.image6{
背景：url（'http://placekitten.com/380/261")不重复;；
}

使用

不透明度

而不是

显示

来添加过渡，并将元素位置设置为绝对位置，使它们彼此位于上方：

let line=document.getElementById（“line”）；
行。addEventListener（“输入”，函数（事件）{
setNewImage（event.target.value）；
});
函数setNewImage（值）{
//console.log（值）；
让currentImage=document.getElementsByClassName（“播放”）；
让removedImage=currentImage[0]。类列表。删除（“播放”）；
让imageToAdd=“image”+值；
//控制台日志（imageToAdd）；
让geteltoad=document.getElementsByClassName（imageToAdd）；
//console.log（getElToAdd）；
设newEl=getElToAdd[0]；
newEl.classList.add（“播放”）；
}

.container{
显示器：flex；
证明内容：中心；
弯曲方向：立柱；
背景色：薰衣草；
宽度：400px；
高度：300px；
}
.图像容器{
宽度：380px；
高度：280px；
}
.滚动条输入{
宽度：380px；
}
保险商实验室{
位置：相对；/*使其相对于ul而不是li*/
保证金：0；
填充：0；
}
/*加上这个*/
ulli.图像{
位置：绝对位置；
排名：0；
左：0；
}
/**/
ulli{
列表样式：无；
}
.形象{
宽度：380px；
高度：260px；
不透明度：0；
过渡：1s全部；
}
.玩{
不透明度：1；
}
.image1{
背景：url（'http://placekitten.com/380/260")不重复;；
}
.image2{
背景：url（'http://placekitten.com/378/260")不重复;；
}
.image3{
背景：url（'http://placekitten.com/380/259")不重复;；
}
.image4{
背景：url（'http://placekitten.com/379/260")不重复;；
}
.image5{
背景：url（'http://placekitten.com/383/260")不重复;；
}
.image6{
背景：url（'http://placekitten.com/380/261")不重复;；
}