Ajouter un effet de transition (css: transition:all 1s ease-in-out;) via javascript
Bonjour,
J'essaie d'ajouter un effet de transition via un code javascript. La situation est la suivante :
Citation:
J'ai 2 colonnes. Celle de gauche représente l'image agrandie de celle cliquée dans la colonne de droite. La colonne de droite contient des vignettes des images à agrandir (dans la colonne de gauche). La colonne de gauche contient un div avec un id ("enlargedimg"). Les vignettes sont englobées chacune dans un tag button qui déclenche une action sur un click (onclick event).
A l'id "enlargedimg" j'ajoute ou retire les classes css "img01, img02, img03, img04" contenant l'image agrandie via le code javascript.
Code:
<button class="btn-product" onclick= "showproduct('img01')"><img src="" class=""></button>
Code:
1
2
3
| .img01 {content: url("img/image1.jpeg");}
.img02 {content: url("img/image2.jpeg");}
.. |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| function showproduct($image) {
$product_win = document.getElementById("enlargedimg");
switch ($image) {
case "img01":
$product_win.classList.toggle($image);
$product_win.classList.remove("img02", "img03", "img04");
break;
case "img02":
$product_win.classList.toggle($image);
$product_win.classList.remove("img01", "img03", "img04");
break;
case "img03":
$product_win.classList.toggle($image);
$product_win.classList.remove("img01", "img02", "img04");
break;
case "img04":
$product_win.classList.toggle($image);
$product_win.classList.remove("img01", "img02", "img03");
break;
}
} |
J'ai essayé
Code:
1
2
3
4
5
| case "img01":
document.getElementById("enlargedimg").style.transition = "all 2s";
$product_win.classList.toggle($image);
$product_win.classList.remove("img02", "img03", "img04");
break; |
Mais cela ne marche pas. Le but étant que l'affichage de l'image agrandie se fasse de manière soft (smooth).
Merci pour votre aide.
PS: je ne connais pas le javascript étant néophyte en la matière.
