From 151dd2491c01e70ed69baf638c22624fae598361 Mon Sep 17 00:00:00 2001 From: SurenNeware Date: Tue, 10 Nov 2020 20:15:05 +0530 Subject: Add new transition class name - Modified transition class name needed for vue3. - Add comment for vue version based classes. Signed-off-by: Suren Neware Change-Id: I3578ca7c45e71326e38888412a4f36c266b005a0 --- src/components/AppNavigation/AppNavigation.vue | 3 ++- src/components/Global/LoadingBar.vue | 4 +++- src/components/Global/TableToolbar.vue | 3 ++- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue index 233d496a..fb50f5ec 100644 --- a/src/components/AppNavigation/AppNavigation.vue +++ b/src/components/AppNavigation/AppNavigation.vue @@ -238,7 +238,8 @@ svg { 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 1034de64..0e9551b5 100644 --- a/src/components/Global/LoadingBar.vue +++ b/src/components/Global/LoadingBar.vue @@ -80,7 +80,9 @@ export default { 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 d22b37fc..4baf8368 100644 --- a/src/components/Global/TableToolbar.vue +++ b/src/components/Global/TableToolbar.vue @@ -103,7 +103,8 @@ $toolbar-height: 46px; .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); } -- cgit v1.2.3