Implementieren Sie Übergangseffekte für die Bildersetzung mit reinem Javascript

Question

Auf einer von mir erstellten Website habe ich eine Reihe von Akkordeons, auf denen jeweils ein Bild zu sehen ist. Wenn Sie das Akkordeon öffnen, befindet sich darin eine Beschreibung und das Bild wechselt zu einem anderen. Wenn Sie dann das Akkordeon schließen, wechselt das Bild zurück zum ersten Bild. Das Problem ist, dass ich möchte, dass dieser Bildwechsel einen sanften Übergang mit einem Fade-Effekt hat, während es sich jetzt nur um einen plötzlichen Wechsel handelt. was soll ich machen?

Angenommen, der Akkordeon-Button hat die ID „button“; die Beschriftung mit dem ersten Bild (das in das zweite Bild geändert wird) hat die ID „firstimage“.

Dies ist der JavaScript-Code:

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

Vielleicht sollte ich das im CSS bearbeiten? Ich habe versucht, dem ersten Bild einen Übergang in CSS hinzuzufügen (Übergang: Alle 360 ​​ms einfach ein- und ausblenden), aber es funktioniert nicht.

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