Implémenter des effets de transition pour le remplacement d'images en utilisant du Javascript pur

Question

Sur un site internet que j'ai créé, j'ai un certain nombre d'accordéons, chacun avec une image dessus. Lorsque vous ouvrez l'accordéon, il y a une description à l'intérieur et l'image se transforme en une autre. Puis lorsque vous fermez l'accordéon, l'image revient à la première image. Le problème est que je veux que ce changement d'image ait une transition douce, avec un effet de fondu, alors que maintenant ce n'est qu'un changement soudain. Que dois-je faire?

Supposons que le bouton accordéon ait un identifiant de « bouton » ; l'étiquette contenant la première image (qui sera remplacée par la deuxième image) ait un identifiant de « première image ».

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

C'est peut-être quelque chose que je devrais modifier dans le CSS ? J'ai essayé d'ajouter une transition en CSS à la première image (Transition : Toutes les 360 ms entrent et sortent facilement) mais cela ne fonctionne pas.

Answer 1

Vous pouvez superposer deux images l'une sur l'autre et définir l'opacité.

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