Discussion :

[F.Salenko]

Hello a tous,

J'ai une petite fonction js qui load des images dans un div :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="presentoire" style="margin:30px;padding:30px;">
	<center>
		<img id="main_picture" src="" width="" height=""> 
	</center>
</div>

Et voici la fonction js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function displayPicture(id)
{
	document.getElementById("main_picture").src = data;
	document.getElementById('main_picture').style.animation = "display_picture 2s";
}

Et voici l'animation qui est loadee :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
@keyframes display_picture
{
from {opacity:0;}
to {opacity:1;}
}
 
@-webkit-keyframes display_picture /* Safari and Chrome */
{
from {opacity:0;}
to {opacity:1;}
}

Mon probleme est que l'animation n'est repetee quune fois alors que je la voudrais a chaque chargement dimage. Pouvez vous maider ?

Merki.
FS

[SylvainPV]

L'attribut que tu cherches est animation-iteration-count
https://developer.mozilla.org/fr/doc...teration-count

A moins que tu veuilles qu'elle s'exécute une seule fois, mais soit réinitialisée à chaque fois que tu passes dans la fonction. Dans ce cas, supprimer et remettre le style devrait faire l'affaire.

[undead001]

Bonjour,
un ID est unique, si tu souhaite que ça soit repeté tu dois utiliser les classes et non les ID.
c'est tout