在我创建的网站上，我有一些手风琴，每个手风琴的顶部都有一个图像。当您打开手风琴时，里面有一个描述，并且图像会变成另一张。然后，当您关闭手风琴时，图像会切换回第一个图像。 问题是我希望这个图像变化有一个平滑的过渡，具有淡入淡出的效果，而现在它只是一个突然的变化。我该怎么做？
假设手风琴按钮的 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 毫秒缓入出），但它不起作用。
您可以将两个图像相互叠加并设置不透明度。
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; }