Update transition classes for vue3 -- TODO: verify classnames per htt…

…ps://v3-migration.vuejs.org/breaking-changes/transition.html
dannon · Oct 24, 2023 · 4114ac7 · 4114ac7
1 parent c8157c1
commit 4114ac7
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
 }