add animation on image swap opacity

andremelchior · Jan 8, 2025 · 74b5138 · 74b5138
1 parent 7efbf50
commit 74b5138
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 18 deletions.
diff --git a/CSS/style.css b/CSS/style.css
@@ -72,11 +72,16 @@ body * {
     left: 0;
     top: 50%;
     transform: translateY(-50%);
+    animation: slide-out 0.3s;
+    transition: outline 0.2s;
+}
+
+#switch button:hover {
+    outline: 8px solid var(--highlight-color);
 }
 
 .light #switch button {
-    right: 0;
-    left: initial;
+    animation: slide-in 0.4s forwards; /*forwards mantém as propriedades de to{...} em keyframes*/
 }
 
 #switch span {
@@ -98,6 +103,7 @@ body * {
 
 #profile img {
     width: 112px;
+    transition: opacity 0.1s ease-in-out;
     transition: all 0.5s;
 }
 
@@ -193,3 +199,23 @@ footer a:hover {
         --bg-url: url(../Assets/bg-desktop-light.jpg);
     }
 }
+
+/*animation*/
+
+@keyframes slide-in {
+    from {
+        left: 0;
+    }
+    to {
+        left: 50%;
+    }
+}
+
+@keyframes slide-out {
+    from {
+        left: 50%;
+    }
+    to {
+        left: 0;
+    }
+}
diff --git a/JS/script.js b/JS/script.js
@@ -11,21 +11,24 @@ function toggleMode() {
 
     html.classList.toggle("light");
 
-    if (html.classList.contains("light")) {
-        img.setAttribute("src", "../Assets/avatar-light.png");
-    } else {
-        img.setAttribute("src", "../Assets/avatar.png");
-    }
+    img.style.opacity = "0";
 
-    if (html.classList.contains("light")) {
-        img.setAttribute(
-            "alt",
-            "Foto de perfil de André Melchior do tema claro"
-        );
-    } else {
-        img.setAttribute(
-            "alt",
-            "Foto de perfil de André Melchior do tema escuro"
-        );
-    }
+    setTimeout(() => {
+        if (html.classList.contains("light")) {
+            img.setAttribute("src", "../Assets/avatar-light.png");
+            img.setAttribute(
+                "alt",
+                "Foto de perfil de André Melchior do tema claro"
+            );
+        } else {
+            img.setAttribute("src", "../Assets/avatar.png");
+            img.setAttribute(
+                "alt",
+                "Foto de perfil de André Melchior do tema escuro"
+            );
+        }
+
+        // Restaura a opacidade para 1
+        img.style.opacity = "1";
+    }, 150);
 }