Implémenter des effets de transition pour le remplacement d'images en utilisant du Javascript pur
P粉458913655
P粉458913655 2024-03-30 00:14:11
0
1
415

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.

P粉458913655
P粉458913655

répondre à tous(1)
P粉345302753

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;
}
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal