Javascript 图像的淡出过渡

我使用下面的代码创建一个范围滑块，其中，滑块的每个值将显示不同的图像

现在，我想添加一种过渡，一旦滑块值改变，图像就会淡出。我怎么做呢

谢谢大家

var slider=document.getElementById（“myRange”）；
var输出=document.getElementById（“值”）；
output.innerHTML=slider.value；
slider.oninput=函数（）{
output.innerHTML=this.value；
var img=document.getElementById（“img”）；
setAttribute（“src”https://loremflickr.com/320/240/“+此值）；
}

价值：

我以前也有同样的要求，并且使用了此代码，您可以根据需要对此进行调整

var-imageUrl=newarray（）；
imageUrl[0]='https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg';
imageUrl[1]='https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg';
imageUrl[2]='http://cdn2.stylecraze.com/wp-content/uploads/2013/07/dahlia-flowers.jpg';
imageUrl[3]='https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg';
imageUrl[4]='https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg';
imageUrl[5]='http://cdn2.stylecraze.com/wp-content/uploads/2013/07/dahlia-flowers.jpg';
$（document）.on（'input change'，'#slider'，function（）{//侦听滑块更改
var v=$（this.val（）；//获取滑块val
$（'#sliderStatus'）.html（$（this.val（））；
$（“img”）.prop（“src”，imageUrl[v]）；
});




slider value=0
在我的解决方案中，我添加了一些CSS来处理转换，为了在用户快速滑动时平滑过渡，我设置了一个超时，将src更改为新图像，并在每次更改时重置（因此只能安排一次更改）。当图像加载时，我们将其淡入


var slider=document.getElementById（“myRange”）；
var输出=document.getElementById（“值”）；
var img=document.getElementById（“img”）；
var加载超时；
var loadHandler=函数（e）{
img.classList.remove（“淡出”）；
img.classList.add（“淡入”）；
}
img.addEventListener（“加载”，loadHandler）；
output.innerHTML=slider.value；
slider.oninput=函数（）{
output.innerHTML=this.value；
img.classList.remove（“淡入”）；
img.classList.add（“淡出”）；
var imgVal=该值；
clearTimeout（loadOutTimeout）；
loadOutTimeout=setTimeout（函数（）{
setAttribute（“src”https://loremflickr.com/320/240/“+imgVal）；
}, 200);
}
@关键帧淡入{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
@关键帧淡出{
从{
不透明度：1；
}
到{
不透明度：0；
}
}
.淡入{
动画：淡入0.2秒轻松度；
动画填充模式：正向；
}
.淡出{
动画：淡出0.2秒；
动画填充模式：正向；
}

价值：

我的回答对你有帮助吗？没有。我看不出过渡位在哪里。