使用纯Javascript实现图像替换的过渡效果

Question

在我创建的网站上，我有一些手风琴，每个手风琴的顶部都有一个图像。当您打开手风琴时，里面有一个描述，并且图像会变成另一张。然后，当您关闭手风琴时，图像会切换回第一个图像。 问题是我希望这个图像变化有一个平滑的过渡，具有淡入淡出的效果，而现在它只是一个突然的变化。我该怎么做？

假设手风琴按钮的 id 为“button”；包含第一张图片（将更改为第二张图片）的标签的 id 为“firstimage”。

这是 JavaScript 代码：

let counter = 1;

let button = document.querySelector("#button");
button.addEventListener("click", function () {
  let image = document.querySelector("#firstimage");
  image.setAttribute(
    "src",
    "(url of the first image)"
  );
  counter++;
  if (counter > 2) {
    counter = 1;
    image.setAttribute(
      "src",
      "(url of the second image)"
    );
  }
});

也许这是我应该在 CSS 中编辑的内容？我已经尝试在 CSS 中向第一个图像添加过渡（过渡：全部 360 毫秒缓入出），但它不起作用。

Answer 1

您可以将两个图像相互叠加并设置不透明度。

document.querySelector('.wrapper').addEventListener("click", function (e) {
  e.currentTarget.classList.toggle("active");
});

.wrapper {
  position: relative;
  display: inline-block;
}

.wrapper > img + img {
  position: absolute;
  left:0;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

.wrapper.active > img + img {
  opacity: 1;
  transition: opacity 2s ease-in-out;
}