diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 9dc3cf03f173..fee5573c6322 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -254,7 +254,7 @@ function toggleContextMenu(evt: MouseEvent) {
     transition: all 0.3s;
 }
 
-.panels-enter,
+.panels-enter-from,
 .panels-leave-to {
     transform: translateX(-100%);
 }
diff --git a/client/src/components/Notifications/NotificationsList.vue b/client/src/components/Notifications/NotificationsList.vue
index a59100fe17b9..2982fdee366b 100644
--- a/client/src/components/Notifications/NotificationsList.vue
+++ b/client/src/components/Notifications/NotificationsList.vue
@@ -188,7 +188,7 @@ function togglePreferences() {
     transition: all 0.3s ease;
 }
 
-.notifications-list-enter {
+.notifications-list-enter-from {
     opacity: 0;
     transform: translateY(-2rem);
 }
diff --git a/client/src/components/Panels/Common/ToolSection.vue b/client/src/components/Panels/Common/ToolSection.vue
index 8fba8e57e473..437b268cc52a 100644
--- a/client/src/components/Panels/Common/ToolSection.vue
+++ b/client/src/components/Panels/Common/ToolSection.vue
@@ -246,12 +246,12 @@ function toggleMenu(nextState = !opened.value) {
 }
 
 .slide-enter-to,
-.slide-leave {
+.slide-leave-from {
     max-height: 100px;
     overflow: hidden;
 }
 
-.slide-enter,
+.slide-enter-from,
 .slide-leave-to {
     overflow: hidden;
     max-height: 0;
diff --git a/client/src/components/User/CloudAuth/CloudAuth.vue b/client/src/components/User/CloudAuth/CloudAuth.vue
index 0a00e1d3c71a..8a02d75fa48a 100644
--- a/client/src/components/User/CloudAuth/CloudAuth.vue
+++ b/client/src/components/User/CloudAuth/CloudAuth.vue
@@ -354,7 +354,7 @@ export default {
     transition: opacity 0.5s;
 }
 
-.fade-enter,
+.fade-enter-from,
 .fade-leave-to {
     opacity: 0;
 }
diff --git a/client/src/components/User/ExternalIdentities/ExternalIdentities.vue b/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
index 487a534fc824..cd0ea825511d 100644
--- a/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
+++ b/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
@@ -340,7 +340,7 @@ export default {
     transition: opacity 0.5s;
 }
 
-.fade-enter,
+.fade-enter-from,
 .fade-leave-to {
     opacity: 0;
 }
diff --git a/client/src/style/scss/transitions.scss b/client/src/style/scss/transitions.scss
index 1b157dd5b66d..0b9c2e36395c 100644
--- a/client/src/style/scss/transitions.scss
+++ b/client/src/style/scss/transitions.scss
@@ -1,14 +1,14 @@
 // Vue Transitions
 // ex: <transition name="shutterfade">
 
-.shutterfade-enter,
+.shutterfade-enter-from,
 .shutterfade-leave-to {
     opacity: 0;
     max-height: 0%;
 }
 
 .shutterfade-enter-to,
-.shutterfade-leave {
+.shutterfade-leave-from {
     opacity: 1;
     max-height: 100%;
 }
@@ -19,13 +19,13 @@
     transition-duration: 0.35s;
 }
 
-.fade-enter,
+.fade-enter-from,
 .fade-leave-to {
     opacity: 0;
 }
 
 .fade-enter-to,
-.fade-leave {
+.fade-leave-from {
     opacity: 1;
 }