Add new transition class name
- Modified transition class name needed for vue3.
- Add comment for vue version based classes.
Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: I3578ca7c45e71326e38888412a4f36c266b005a0
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);
}