fix and add transitions

Signed-off-by: dartcafe <github@dartcafe.de>

src/App.vue

@@ -26,7 +26,7 @@
 	const loading = ref(false)
 
 	const appClass = computed(() => [
-		transitionClass, {
+		transitionClass.value, {
 			edit: pollStore.permissions.edit,
 		},
 	])

src/assets/scss/transitions.scss

@@ -8,20 +8,22 @@
 		transition: all 0.5s ease;
 	}
 
-	.list-enter,
+	.list-enter-from,
 	.list-leave-to {
 		opacity: 0;
 	}
 
 	.list-move {
-		transition: transform 0.5s;
-	}
-
-	.fade-leave-active .fade-enter-active{
-		transition: opacity 0.5s;
+		transition: transform 0.5s ease;
 	}
+}
 
-	.fade-enter, .fade-leave-to {
-		opacity: 0;
-	}
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
 }
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}

src/components/Activity/Activities.vue

@@ -12,7 +12,7 @@
 </script>
 
 <template>
-	<TransitionGroup name="fade"
+	<TransitionGroup name="list"
 		class="activities"
 		tag="ul">
 		<ActivityItem v-for="(item) in activityStore.list"

src/components/Cards/VoteInfoCards.vue

@@ -32,14 +32,14 @@
 </script>
 
 <template>
-	<div class="info-section">
-		<CardUnpublishedPoll v-if="showUnpublishedPollCard" />
-		<CardAddProposals v-if="showAddProposalsCard" />
-		<CardLimitedVotes v-if="showLimitCard" />
-		<CardClosedPoll v-if="showClosedCard" />
-		<CardSendConfirmations v-if="showSendConfirmationsCard" />
-		<CardLocked v-if="pollStore.currentUserStatus.isLocked" />
-		<CardRegister v-if="showRegisterCard" />
-	</div>
+	<TransitionGroup class="info-section">
+		<CardUnpublishedPoll v-if="showUnpublishedPollCard" :key="0" />
+		<CardAddProposals v-if="showAddProposalsCard" :key="1" />
+		<CardLimitedVotes v-if="showLimitCard" :key="2" />
+		<CardClosedPoll v-if="showClosedCard" :key="3" />
+		<CardSendConfirmations v-if="showSendConfirmationsCard" :key="4" />
+		<CardLocked v-if="pollStore.currentUserStatus.isLocked" :key="5" />
+		<CardRegister v-if="showRegisterCard" :key="6" />
+	</TransitionGroup>
 </template>
 

src/components/Comments/Comments.vue

@@ -18,7 +18,7 @@
 
 <template>
 	<TransitionGroup tag="ul"
-		name="fade"
+		name="list"
 		:class="['comments' , { 'alternativestyle': preferencesStore.user.useCommentsAlternativeStyling }]"
 		:style="cssVar">
 		<CommentItem v-for="(comment) in commentsStore.groupedComments"