Bonjour,

J'essaie d'ajouter un effet de transition via un code javascript. La situation est la suivante :

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 HTML : Sélectionner tout - Visualiser dans une fenêtre à part
<button class="btn-product" onclick= "showproduct('img01')"><img src="" class=""></button>
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
.img01 {content: url("img/image1.jpeg");}
.img02 {content: url("img/image2.jpeg");}
..
Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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.