在我創建的網站上，我有一些手風琴，每個手風琴的頂部都有一個圖像。當您打開手風琴時，裡面有一個描述，圖像會變成另一張。然後，當您關閉手風琴時，影像會切換回第一個影像。 問題是我希望這個圖像變化有一個平滑的過渡，具有淡入淡出的效果，而現在它只是一個突然的變化。我該怎麼做？
假設手風琴按鈕的 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; }