Widget:Test: mudanças entre as edições

Widget:Test (ver código-fonte)

Edição das 17h07min de 29 de dezembro de 2024

616 bytes adicionados , 29 de dezembro de 2024

sem sumário de edição

Renee

Administradores

6 392

edições

@@ Linha 149: / Linha 149: @@
      const swapButtons = document.querySelectorAll('.swap-button');
-    swapButtons.forEach(button => {
+   swapButtons.forEach(button => {
-        const index = button.getAttribute('data-variation-index');
+    const index = button.getAttribute('data-variation-index');
-        const variation = imageInfo.variations[index];
+    const variation = imageInfo.variations[index];
-        let currentImageIndex = 0;
+    let currentImageIndex = 0;
-        button.addEventListener('click', () => {
+    button.addEventListener('click', () => {
+        const variationImage = button.previousElementSibling; // Obtém a imagem da variação
+        // Aplica o efeito de saída
+        variationImage.classList.add('fade-out');
+        // Aguarda o término da animação antes de trocar a imagem
+        setTimeout(() => {
              currentImageIndex = (currentImageIndex + 1) % variation.additionalImages.length;
-            const variationImage = button.previousElementSibling; // Atualiza a imagem da variação
              variationImage.src = variation.additionalImages[currentImageIndex].url;
              variationImage.style.width = `${variation.additionalImages[currentImageIndex].width}px`;
-         });
+            // Remove o efeito de saída e aplica o efeito de entrada
+            variationImage.classList.remove('fade-out');
+            variationImage.classList.add('fade-in');
+            // Remove o efeito de entrada após a transição
+            setTimeout(() => {
+                variationImage.classList.remove('fade-in');
+            }, 300); // Duração da animação CSS (0.3s)
+         }, 300); // Sincroniza com a duração do efeito de saída
      });
+});
 }