J'ai une page HTML très simple avec une image et un bouton. L'idée est que, lorsque l'on clique sur le bouton, l'image se transforme en une autre image.

Pour le moment, j'ai réussi à changer l'image en cliquant sur le bouton en utilisant le javascript suivant:

document.getElementById("img").src="img2.jpg";

Cependant, je voudrais savoir s'il existe un moyen facile et simple d'effectuer le changement comme une transition, par exemple un fondu enchaîné entre les deux images, avec seulement javascript et css.

1
Marta Sampietro 7 août 2016 à 13:33

3 réponses

Fade in et out les images. C'est la façon la plus simple de le faire, mais il n'y aura pas de fondu enchaîné.

CSS:

img { 
-webkit-transition: opacity 0.1s ease-in-out;
-moz-transition: opacity 0.1s ease-in-out;
-o-transition: opacity 0.1s ease-in-out;
transition: opacity 0.1s ease-in-out;
}

.hidden {
  opacity: 0;
}

JS:

var img = document.getElementById('i');
setInterval(function() { 
  img.className += ' hidden';
  img.src="http://lorempixel.com/400/200/";

  setTimeout(function() {
    img.className = img.className.replace('hidden', '');
  }, 100);
}, 1000);

https://jsfiddle.net/9tksj3fa/2/

1
XCS 7 août 2016 à 11:13

Si vous voulez que «l'image B» apparaisse en fondu lorsque «l'image A» disparaît.

Je pense que vous pouvez laisser "image B" en premier sur "image A", mais faites-le opacity: 0

De plus, vous pouvez utiliser transition-delay qui peut laisser la transition de "l'image B"

Reporter un peu

Je suppose que c'est ce que tu veux dire "fondu enchaîné"

http://jsbin.com/sigihazuka/edit?html,css,js,output

Conclusion

  1. "image B" au-dessus de "image A", mais elle sera transparente
  2. lorsque l'utilisateur clique sur "image A", nous ajoutons la classe "fade-out" sur "image A" et "fade-in-delay" sur "image B"
  3. lorsque le "fondu sortant" est terminé, ajoutez la classe "hide" sur "l'image A"
0
Even 7 août 2016 à 10:59

Vous pouvez positionner l'un img carrément au-dessus de l'autre, puis en donner un img un opacity de 1 et l'autre img un {{X5} } de 0.

Ensuite, lorsque button est cliqué, l'opaque img sera transition à un opacity de 0 et le transparent img passera à un opacity sur 1.

Exemple:

var images = document.getElementsByTagName('img');
var button = document.getElementsByTagName('button')[0];


function crossFade() {

    for (var i = 0; i < images.length; i++) {
        images[i].classList.toggle('transparent');
        images[i].classList.toggle('opaque');
    }
}


button.addEventListener('click',crossFade,false);
button, .images {
display: inline-block;
position: relative;
margin: 24px;
vertical-align: middle;
}

.image-1, .image-2 {
position: absolute;
top: 0;
left: 0;
transition: opacity 2s ease-out;
}

.images, .image-1, .image-2 {
width: 140px;
height: 140px;
}

.image-1 {
background-color: rgb(255,0,0);
}

.image-2 {
background-color: rgb(255,255,0);
}

.opaque {
opacity: 1;
}

.transparent {
opacity: 0;
}
<button type="button">Cross Fade</button>

<div class="images">
<img class="image-1 opaque" alt="Image 1" />
<img class="image-2 transparent" alt="Image 2" />
</div>
0
Rounin 7 août 2016 à 13:26