使用 Javascript 更改其 SRC 时如何向图像添加过渡效果？答案

【问题标题】：How to add a transition effect to an image when changing its SRC with Javascript?使用 Javascript 更改其 SRC 时如何向图像添加过渡效果？
【发布时间】：2020-09-18 02:09:41
【问题描述】：

我想在更改 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;
}

但是当将相同的样式添加到 bible-verse 类的 CSS 时，我似乎没有得到相同的效果。如何在不需要 div 容器的情况下为 bible-verse img 标签添加过渡效果？

【问题讨论】：

标签： javascript html css

【解决方案1】：

Transition 属性不适用于 background-image 等属性

这里有 oof 动画 css 属性列表：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

但是您可以通过使用@keyframes 动画为图像设置动画来解决此问题。这取决于你想达到什么样的效果。但我有一个例子。如果您想创建图像滑动的动画，您可以创建两个图像，一个将隐藏在可见图像下，通过@keyframes 您可以将第一个可见图像移动到它所在的容器后面，然后将其删除，当它在屏幕外。它必须通过结合 JavaScript（添加动画图像、删除图像等的类）和 CSS（动画图像）来完成。

【讨论】：