From 2ef2bb77008aacc3be2f84e2685a4f07c66fcd5a Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Fri, 20 Aug 2021 17:01:19 +0200
Subject: [PATCH] fix: transition class names

see: https://v3.vuejs.org/guide/migration/transition.html
---
 src/styles/components/kanban.scss     |  8 ++++++--
 src/styles/components/task.scss       |  3 ++-
 src/styles/utilities/transitions.scss | 12 ++++++++----
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/styles/components/kanban.scss b/src/styles/components/kanban.scss
index 3b96b6c1..d3152bb4 100644
--- a/src/styles/components/kanban.scss
+++ b/src/styles/components/kanban.scss
@@ -205,8 +205,12 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 					}
 				}
 
-				&.v-leave, &.v-leave-to, &.v-leave-active
-				&.move-card-leave, &.move-card-leave-to, &.move-card-leave-active {
+				&.v-leave-from,
+				&.v-leave-to,
+				&.v-leave-active
+				&.move-card-leave-from,
+				&.move-card-leave-to,
+				&.move-card-leave-active {
 					display: none;
 				}
 			}
diff --git a/src/styles/components/task.scss b/src/styles/components/task.scss
index 19d825f0..7a62b1f2 100644
--- a/src/styles/components/task.scss
+++ b/src/styles/components/task.scss
@@ -238,7 +238,8 @@
   }
 }
 
-.flash-background-enter, .flash-background-enter-active  {
+.flash-background-enter-from,
+.flash-background-enter-active  {
   animation: flash-background $flash-background-duration ease 1;
 }
 
diff --git a/src/styles/utilities/transitions.scss b/src/styles/utilities/transitions.scss
index 5cd273e3..19de9dd3 100644
--- a/src/styles/utilities/transitions.scss
+++ b/src/styles/utilities/transitions.scss
@@ -1,15 +1,19 @@
-.fade-enter-active, .fade-leave-active {
+.fade-enter-active,
+.fade-leave-active {
   transition: opacity $transition-duration;
 }
 
-.fade-enter, .fade-leave-to {
+.fade-enter-from,
+.fade-leave-to {
   opacity: 0;
 }
 
-.width-enter-active, .width-leave-active {
+.width-enter-active,
+.width-leave-active {
   transition: width $transition-duration;
 }
 
-.width-enter, .width-leave-to {
+.width-enter-from,
+.width-leave-to {
   width: 0;
 }
\ No newline at end of file