Laksanakan kesan peralihan untuk penggantian imej menggunakan Javascript tulen

Question

Di tapak web yang saya buat, saya mempunyai beberapa akordion, setiap satu dengan imej di atas. Apabila anda membuka akordion, terdapat penerangan di dalam dan imej bertukar kepada yang lain. Kemudian apabila anda menutup akordion, imej bertukar kembali kepada imej pertama. Masalahnya ialah saya mahu perubahan imej ini mempunyai peralihan yang lancar, dengan kesan pudar, sedangkan sekarang ia hanya perubahan mendadak. apa patut saya buat?

Andaikan butang akordion mempunyai id "butang"; label yang mengandungi imej pertama (yang akan ditukar kepada imej kedua) mempunyai id "imej pertama".

Ini ialah kod 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)"
    );
  }
});

Mungkin ini adalah sesuatu yang perlu saya edit dalam CSS? Saya telah cuba menambah peralihan dalam CSS kepada imej pertama (peralihan: semua 360 ms mudah masuk dan keluar) tetapi ia tidak berfungsi.

Answer 1

Anda boleh menindih dua imej di atas satu sama lain dan menetapkan kelegapan.

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;
}