Animation après changement d'image en javascript

Version imprimable

Hello,

Je suis en train de faire une liste de menu de restauration avec une image .jpg pour les représenter.

Voici comment j'ai fait en html
Code:

1 2 3 4 5 6 7 8 9 10 <div class="large"> <img id="menu" src="img/menu_large.jpg"> </div> <div class="little"> <img class="menus" src="img/menu1.jpg" onclick="change('img/menu1_large.jpg')" alt="menus"> <img class="menus" src="img/menu2.jpg" onclick="change('img/menu2_large.jpg')" alt="menus"> <img class="menus" src="img/menu3.jpg" onclick="change('img/menu3_large.jpg')" alt="menus"> <img class="menus" src="img/menu4.jpg" onclick="change('img/menu4_large.jpg')" alt="menus"> <img class="menus" src="img/menu5.jpg" onclick="change('img/menu5_large.jpg')" alt="menus"> </div>
en javascript
Code:

1 2 3 4 5 6 7 8 function change(imageaaffiche){ document.getElementById('menu').src =imageaaffiche; } var img = $("#menu"); var clk = $(".menus"); clk.on('click', function(){ img.addClass('active'); })
et en css
Code:

1 2 3 4 5 6 7 .active{ -webkit-animation:anyname 2s; /* Safari and Chrome */ } @-webkit-keyframes anyname{ /* Safari and Chrome */ from {opacity: 0;} to {opacity: 1;} }
la div "large" fait apparaitre en grand le menu sur lequel on a cliqué. Dès que l'on clique sur une autre miniature, l image en grand change.

Jusqu'ici tout va bien, l image en grand change comme je le veut. Ce que je voudrais, c est d'avoir une transition (une sorte de fadeIn()) entre 2 changements.

en javascript, j'ajoute une class active qui a pour but de savoir sur qu elle menu nous sommes et de faire les animations necessaire coté css.
Je ne sais pas si c'est l'heure qui fait ça, mais je n'arrive pas a le faire. Cela marche la premiere fois que je clique mais pas les autres fois.

Merci ;)

26/02/2015, 01h20
Watilin

Ça ne marche pas la deuxième fois car la classe est déjà présente. Il faut que tu la retires à un moment.
26/02/2015, 11h49
biohazard401

Bonjour,

C'est bien ce que je penser. J'ai essayer de le faire mais je ne sais pas à quel moment retirer la class.

Faudrait faire une condition ?

Merci ;)
26/02/2015, 13h49
Bovino

Il existe un événement animationend pour détecter en JavaScript la fin d'une animation. ;)

Merci Bovino, c'est pile poile ce que je chercher :D.

Pour ceux qui cherche la solution, je vous mets le code complet

HTML

Code:

1
2
3
4
5
6
7
8
9
10
<div class="large">
	<img id="menu" src="img/menu_large.jpg">
</div>
<div class="little">
	<img class="menus" src="img/menu1.jpg" onclick="change('img/menu1_large.jpg')" alt="menus">
	<img class="menus" src="img/menu2.jpg" onclick="change('img/menu2_large.jpg')" alt="menus">
	<img class="menus" src="img/menu3.jpg" onclick="change('img/menu3_large.jpg')" alt="menus">
	<img class="menus" src="img/menu4.jpg" onclick="change('img/menu4_large.jpg')" alt="menus">
	<img class="menus" src="img/menu5.jpg" onclick="change('img/menu5_large.jpg')" alt="menus">
</div>

CSS

Code:

1
2
3
4
5
6
7
.active{
	-webkit-animation:anyname 1s; /* Safari and Chrome */
}
@-webkit-keyframes anyname{ /* Safari and Chrome */
	from {opacity: 0;}
	to {opacity: 1;}
}

Code:

1
2
3
4
5
6
7
8
9
var img = $("#menu");
  var clk = $(".menus");
  clk.on('click', function(){
    img.addClass('active');
    $(img).one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ img.removeClass('active'); });
  })
function change(imageaaffiche){
  document.getElementById('menu').src =imageaaffiche;
}

La modification que j'ai faite ce trouve ici

Code:

$(img).one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ img.removeClass('active'); });

Grace à ça, a chaque fin d'animation, la class active est supprimer et sera remis au prochain click ce qui va permettre de faire l'animation.

Encore merci. Je mets en résolu

Pourquoi .one() ? :koi:

EDIT
Ah oui, j'ai vu... mais du coup,

Code:

1
2
3
4
5
6
7
8
9
var img = $("#menu");
var clk = $(".menus");
clk.on('click', function(){
    img.addClass('active');
});
img.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ img.removeClass('active'); });
function change(imageaaffiche){
  document.getElementById('menu').src =imageaaffiche;
}

serait préférable je pense.