diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 233d496..fb50f5e 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -238,7 +238,8 @@
     transition: opacity $duration--fast-02 $exit-easing--productive;
   }
 
-  &.fade-enter,
+  &.fade-enter, // Remove this vue2 based only class when switching to vue3
+  &.fade-enter-from, // This is vue3 based only class modified from 'fade-enter'
   &.fade-leave-to {
     opacity: 0;
   }
diff --git a/src/components/Global/LoadingBar.vue b/src/components/Global/LoadingBar.vue
index 1034de6..0e9551b 100644
--- a/src/components/Global/LoadingBar.vue
+++ b/src/components/Global/LoadingBar.vue
@@ -80,7 +80,9 @@
   opacity: 1;
   transition: opacity $duration--moderate-01 $standard-easing--productive;
   height: 0.4rem;
-  &.fade-enter,
+
+  &.fade-enter, // Remove this vue2 based only class when switching to vue3
+  &.fade-enter-from, // This is vue3 based only class modified from 'fade-enter'
   &.fade-leave-to {
     opacity: 0;
   }
diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
index d22b37f..4baf836 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -103,7 +103,8 @@
 .slide-leave-active {
   transition: transform $duration--moderate-02 $exit-easing--productive;
 }
-.slide-enter,
+.slide-enter, // Remove this vue2 based only class when switching to vue3
+.slide-enter-from, // This is vue3 based only class modified from 'slide-enter'
 .slide-leave-to {
   transform: translateY($toolbar-height);
 }