如何在使用Javascript更改图片的SRC时为图片添加过渡效果？
如何在使用Javascript更改图片的SRC时为图片添加过渡效果？
提问于 2020-05-30 22:42:05
当改变图片标签的SRC时，我想给它添加一个过渡效果。我有以下几点：
let bverse = document.getElementById('bible-verse');
setTimeout(function(){
bverse.src="../images/bverses/verse2.jpg";
}, 5000);我已经成功地为背景图像添加了一个过渡效果：
JavaScript：
let slider = document.getElementById('hero-slider');
setTimeout(function(){
slider.style.backgroundImage="url(../images/hero/slider-2.jpg)";
}, 5000);CSS：
.hero-bg {
background-image: url(../images/hero/slider-0.jpg);
transition: background-image 2s;
}但是当我将相同的样式添加到圣经诗句类的CSS中时，我似乎没有得到同样的效果。我怎样才能在不需要div容器的情况下，给bible-verse img标签添加一个过渡效果？
回答 1
Stack Overflow用户
发布于 2020-05-30 22:52:13
过渡属性不适用于背景图像等属性
下面是css的动画属性列表：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
但是你可以在这里做一些变通的方法，用@keyframe动画来动画图像。这取决于你想要达到什么效果。但我有一个例子。如果你想创建图像滑动的动画，你可以创建两个图像，一个隐藏在可见图像下，通过@keyframe，你只需将第一个可见图像移动到它所在的容器后面，然后当它在屏幕外时将其删除。这必须通过组合JavaScript (添加一个类来动画图像、删除图像等)和CSS (动画图像)来完成。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62104034
复制相关文章
相似问题
腾讯云开发者
