使用純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;
}