From 0d64506d73c9392cbe38fb77602fccbe0c8ee682 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 23 Jan 2021 18:54:22 +0100
Subject: [PATCH] Make sure all popups & dropdowns are animated

---
 src/components/sharing/linkSharing.vue        |  28 +--
 src/components/sharing/userTeam.vue           | 178 +++++++++---------
 src/components/tasks/partials/attachments.vue |  38 ++--
 src/components/tasks/partials/comments.vue    |  43 +++--
 .../tasks/partials/relatedTasks.vue           |  18 +-
 src/views/list/EditList.vue                   |  18 +-
 src/views/list/views/Kanban.vue               | 105 ++++++-----
 src/views/namespaces/EditNamespace.vue        |  18 +-
 src/views/tasks/TaskDetailView.vue            |  24 +--
 src/views/teams/EditTeam.vue                  |  58 +++---
 10 files changed, 276 insertions(+), 252 deletions(-)

diff --git a/src/components/sharing/linkSharing.vue b/src/components/sharing/linkSharing.vue
index 51949524f..99059fd02 100644
--- a/src/components/sharing/linkSharing.vue
+++ b/src/components/sharing/linkSharing.vue
@@ -97,19 +97,21 @@
 			</table>
 		</div>
 
-		<modal
-			@close="showDeleteModal = false"
-			@submit="remove()"
-			v-if="showDeleteModal"
-		>
-			<span slot="header">Remove a link share</span>
-			<p slot="text">
-				Are you sure you want to remove this link share?<br/>
-				It will no longer be possible to access this list with this link
-				share.<br/>
-				<b>This CANNOT BE UNDONE!</b>
-			</p>
-		</modal>
+		<transition name="modal">
+			<modal
+				@close="showDeleteModal = false"
+				@submit="remove()"
+				v-if="showDeleteModal"
+			>
+				<span slot="header">Remove a link share</span>
+				<p slot="text">
+					Are you sure you want to remove this link share?<br/>
+					It will no longer be possible to access this list with this link
+					share.<br/>
+					<b>This CANNOT BE UNDONE!</b>
+				</p>
+			</modal>
+		</transition>
 	</card>
 </template>
 
diff --git a/src/components/sharing/userTeam.vue b/src/components/sharing/userTeam.vue
index 3d5aaa50c..ae918aa97 100644
--- a/src/components/sharing/userTeam.vue
+++ b/src/components/sharing/userTeam.vue
@@ -16,114 +16,116 @@
 					/>
 				</p>
 				<p class="control">
-					<x-button @click="add()"> Share </x-button>
+					<x-button @click="add()"> Share</x-button>
 				</p>
 			</div>
 		</div>
 		<table class="table is-striped is-hoverable is-fullwidth">
 			<tbody>
-				<tr :key="s.id" v-for="s in sharables">
-					<template v-if="shareType === 'user'">
-						<td>{{ s.getDisplayName() }}</td>
-						<td>
-							<template v-if="s.id === userInfo.id">
-								<b class="is-success">You</b>
-							</template>
-						</td>
-					</template>
-					<template v-if="shareType === 'team'">
-						<td>
-							<router-link
-								:to="{
+			<tr :key="s.id" v-for="s in sharables">
+				<template v-if="shareType === 'user'">
+					<td>{{ s.getDisplayName() }}</td>
+					<td>
+						<template v-if="s.id === userInfo.id">
+							<b class="is-success">You</b>
+						</template>
+					</td>
+				</template>
+				<template v-if="shareType === 'team'">
+					<td>
+						<router-link
+							:to="{
 									name: 'teams.edit',
 									params: { id: s.id },
 								}"
-							>
-								{{ s.name }}
-							</router-link>
-						</td>
-					</template>
-					<td class="type">
-						<template v-if="s.right === rights.ADMIN">
-							<span class="icon is-small">
-								<icon icon="lock" />
-							</span>
-							Admin
-						</template>
-						<template v-else-if="s.right === rights.READ_WRITE">
-							<span class="icon is-small">
-								<icon icon="pen" />
-							</span>
-							Write
-						</template>
-						<template v-else>
-							<span class="icon is-small">
-								<icon icon="users" />
-							</span>
-							Read-only
-						</template>
+						>
+							{{ s.name }}
+						</router-link>
 					</td>
-					<td class="actions" v-if="userIsAdmin">
-						<div class="select">
-							<select
-								@change="toggleType(s)"
-								class="button mr-2"
-								v-model="selectedRight[s.id]"
+				</template>
+				<td class="type">
+					<template v-if="s.right === rights.ADMIN">
+							<span class="icon is-small">
+								<icon icon="lock"/>
+							</span>
+						Admin
+					</template>
+					<template v-else-if="s.right === rights.READ_WRITE">
+							<span class="icon is-small">
+								<icon icon="pen"/>
+							</span>
+						Write
+					</template>
+					<template v-else>
+							<span class="icon is-small">
+								<icon icon="users"/>
+							</span>
+						Read-only
+					</template>
+				</td>
+				<td class="actions" v-if="userIsAdmin">
+					<div class="select">
+						<select
+							@change="toggleType(s)"
+							class="button mr-2"
+							v-model="selectedRight[s.id]"
+						>
+							<option
+								:selected="s.right === rights.READ"
+								:value="rights.READ"
 							>
-								<option
-									:selected="s.right === rights.READ"
-									:value="rights.READ"
-								>
-									Read only
-								</option>
-								<option
-									:selected="s.right === rights.READ_WRITE"
-									:value="rights.READ_WRITE"
-								>
-									Read & write
-								</option>
-								<option
-									:selected="s.right === rights.ADMIN"
-									:value="rights.ADMIN"
-								>
-									Admin
-								</option>
-							</select>
-						</div>
-						<x-button
-							@click="
+								Read only
+							</option>
+							<option
+								:selected="s.right === rights.READ_WRITE"
+								:value="rights.READ_WRITE"
+							>
+								Read & write
+							</option>
+							<option
+								:selected="s.right === rights.ADMIN"
+								:value="rights.ADMIN"
+							>
+								Admin
+							</option>
+						</select>
+					</div>
+					<x-button
+						@click="
 								() => {
 									sharable = s
 									showDeleteModal = true
 								}
 							"
-							class="is-danger"
-							icon="trash-alt"
-						/>
-					</td>
-				</tr>
+						class="is-danger"
+						icon="trash-alt"
+					/>
+				</td>
+			</tr>
 			</tbody>
 		</table>
 
-		<modal
-			@close="showDeleteModal = false"
-			@submit="deleteSharable()"
-			v-if="showDeleteModal"
-		>
-			<span slot="header"
-				>Remove a {{ shareType }} from the {{ typeString }}</span
+		<transition name="modal">
+			<modal
+				@close="showDeleteModal = false"
+				@submit="deleteSharable()"
+				v-if="showDeleteModal"
 			>
-			<p slot="text">
-				Are you sure you want to remove this {{ shareType }} from the
-				{{ typeString }}?<br />
-				<b>This CANNOT BE UNDONE!</b>
-			</p>
-		</modal>
+			<span slot="header"
+			>Remove a {{ shareType }} from the {{ typeString }}</span
+			>
+				<p slot="text">
+					Are you sure you want to remove this {{ shareType }} from the
+					{{ typeString }}?<br/>
+					<b>This CANNOT BE UNDONE!</b>
+				</p>
+			</modal>
+		</transition>
 	</card>
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import {mapState} from 'vuex'
 
 import UserNamespaceService from '../../services/userNamespace'
 import UserNamespaceModel from '../../models/userNamespace'
@@ -194,7 +196,7 @@ export default {
 			if (this.type === 'list') {
 				this.typeString = `list`
 				this.stuffService = new UserListService()
-				this.stuffModel = new UserListModel({ listId: this.id })
+				this.stuffModel = new UserListModel({listId: this.id})
 			} else if (this.type === 'namespace') {
 				this.typeString = `namespace`
 				this.stuffService = new UserNamespaceService()
@@ -212,7 +214,7 @@ export default {
 			if (this.type === 'list') {
 				this.typeString = `list`
 				this.stuffService = new TeamListService()
-				this.stuffModel = new TeamListModel({ listId: this.id })
+				this.stuffModel = new TeamListModel({listId: this.id})
 			} else if (this.type === 'namespace') {
 				this.typeString = `namespace`
 				this.stuffService = new TeamNamespaceService()
@@ -362,7 +364,7 @@ export default {
 			}
 
 			this.searchService
-				.getAll({}, { s: query })
+				.getAll({}, {s: query})
 				.then((response) => {
 					this.$set(this, 'found', response)
 				})
diff --git a/src/components/tasks/partials/attachments.vue b/src/components/tasks/partials/attachments.vue
index 519da02c5..3e20b36b6 100644
--- a/src/components/tasks/partials/attachments.vue
+++ b/src/components/tasks/partials/attachments.vue
@@ -2,7 +2,7 @@
 	<div class="attachments">
 		<h3>
 			<span class="icon is-grey">
-				<icon icon="paperclip" />
+				<icon icon="paperclip"/>
 			</span>
 			Attachments
 		</h3>
@@ -38,8 +38,8 @@
 						<span>
 							created
 							<span v-tooltip="formatDate(a.created)">{{
-								formatDateSince(a.created)
-							}}</span>
+									formatDateSince(a.created)
+								}}</span>
 							by
 							<user
 								:avatar-size="24"
@@ -93,25 +93,27 @@
 		>
 			<div class="drop-hint">
 				<div class="icon">
-					<icon icon="cloud-upload-alt" />
+					<icon icon="cloud-upload-alt"/>
 				</div>
 				<div class="hint">Drop files here to upload</div>
 			</div>
 		</div>
 
 		<!-- Delete modal -->
-		<modal
-			@close="showDeleteModal = false"
-			v-if="showDeleteModal"
-			@submit="deleteAttachment()"
-		>
-			<span slot="header">Delete attachment</span>
-			<p slot="text">
-				Are you sure you want to delete the attachment
-				{{ attachmentToDelete.file.name }}?<br />
-				<b>This CANNOT BE UNDONE!</b>
-			</p>
-		</modal>
+		<transition name="modal">
+			<modal
+				@close="showDeleteModal = false"
+				v-if="showDeleteModal"
+				@submit="deleteAttachment()"
+			>
+				<span slot="header">Delete attachment</span>
+				<p slot="text">
+					Are you sure you want to delete the attachment
+					{{ attachmentToDelete.file.name }}?<br/>
+					<b>This CANNOT BE UNDONE!</b>
+				</p>
+			</modal>
+		</transition>
 
 		<transition name="modal">
 			<modal
@@ -123,7 +125,7 @@
 				"
 				v-if="showImageModal"
 			>
-				<img :src="attachmentImageBlobUrl" alt="" />
+				<img :src="attachmentImageBlobUrl" alt=""/>
 			</modal>
 		</transition>
 	</div>
@@ -134,7 +136,7 @@ import AttachmentService from '../../../services/attachment'
 import AttachmentModel from '../../../models/attachment'
 import User from '../../misc/user'
 import attachmentUpload from '@/components/tasks/mixins/attachmentUpload'
-import { mapState } from 'vuex'
+import {mapState} from 'vuex'
 
 export default {
 	name: 'attachments',
diff --git a/src/components/tasks/partials/comments.vue b/src/components/tasks/partials/comments.vue
index b53c81632..8f798f299 100644
--- a/src/components/tasks/partials/comments.vue
+++ b/src/components/tasks/partials/comments.vue
@@ -2,7 +2,7 @@
 	<div class="content details">
 		<h3 v-if="canWrite || comments.length > 0">
 			<span class="icon is-grey">
-				<icon :icon="['far', 'comments']" />
+				<icon :icon="['far', 'comments']"/>
 			</span>
 			Comments
 		</h3>
@@ -38,8 +38,8 @@
 						<strong>{{ c.author.getDisplayName() }}</strong
 						>&nbsp;
 						<span v-tooltip="formatDate(c.created)">{{
-							formatDateSince(c.created)
-						}}</span>
+								formatDateSince(c.created)
+							}}</span>
 						<span
 							v-if="+new Date(c.created) !== +new Date(c.updated)"
 							v-tooltip="formatDate(c.updated)"
@@ -140,17 +140,20 @@
 				</div>
 			</div>
 		</div>
-		<modal
-			@close="showDeleteModal = false"
-			@submit="deleteComment()"
-			v-if="showDeleteModal"
-		>
-			<span slot="header">Delete this comment</span>
-			<p slot="text">
-				Are you sure you want to delete this comment? <br />This
-				<b>CANNOT BE UNDONE!</b>
-			</p>
-		</modal>
+
+		<transition name="modal">
+			<modal
+				@close="showDeleteModal = false"
+				@submit="deleteComment()"
+				v-if="showDeleteModal"
+			>
+				<span slot="header">Delete this comment</span>
+				<p slot="text">
+					Are you sure you want to delete this comment? <br/>This
+					<b>CANNOT BE UNDONE!</b>
+				</p>
+			</modal>
+		</transition>
 	</div>
 </template>
 
@@ -167,7 +170,7 @@ export default {
 		editor: () => ({
 			component: import(
 				/* webpackChunkName: "editor" */ '../../input/editor'
-			),
+				),
 			loading: LoadingComponent,
 			error: ErrorComponent,
 			timeout: 60000,
@@ -205,9 +208,9 @@ export default {
 	},
 	created() {
 		this.taskCommentService = new TaskCommentService()
-		this.newComment = new TaskCommentModel({ taskId: this.taskId })
-		this.commentEdit = new TaskCommentModel({ taskId: this.taskId })
-		this.commentToDelete = new TaskCommentModel({ taskId: this.taskId })
+		this.newComment = new TaskCommentModel({taskId: this.taskId})
+		this.commentEdit = new TaskCommentModel({taskId: this.taskId})
+		this.commentToDelete = new TaskCommentModel({taskId: this.taskId})
 		this.comments = []
 	},
 	mounted() {
@@ -229,7 +232,7 @@ export default {
 	methods: {
 		loadComments() {
 			this.taskCommentService
-				.getAll({ taskId: this.taskId })
+				.getAll({taskId: this.taskId})
 				.then((r) => {
 					this.$set(this, 'comments', r)
 					this.makeActions()
@@ -258,7 +261,7 @@ export default {
 					this.comments.push(r)
 					this.newComment.comment = ''
 					this.success(
-						{ message: 'The comment was added successfully.' },
+						{message: 'The comment was added successfully.'},
 						this
 					)
 				})
diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue
index 869a0f4fe..f133a5d63 100644
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/src/components/tasks/partials/relatedTasks.vue
@@ -88,14 +88,16 @@
 		</p>
 
 		<!-- Delete modal -->
-		<modal
-			@close="showDeleteModal = false"
-			@submit="removeTaskRelation()"
-			v-if="showDeleteModal">
-			<span slot="header">Delete Task Relation</span>
-			<p slot="text">Are you sure you want to delete this task relation?<br/>
-				<b>This CANNOT BE UNDONE!</b></p>
-		</modal>
+		<transition name="modal">
+			<modal
+				@close="showDeleteModal = false"
+				@submit="removeTaskRelation()"
+				v-if="showDeleteModal">
+				<span slot="header">Delete Task Relation</span>
+				<p slot="text">Are you sure you want to delete this task relation?<br/>
+					<b>This CANNOT BE UNDONE!</b></p>
+			</modal>
+		</transition>
 	</div>
 </template>
 
diff --git a/src/views/list/EditList.vue b/src/views/list/EditList.vue
index 031fcdfd1..f1155f842 100644
--- a/src/views/list/EditList.vue
+++ b/src/views/list/EditList.vue
@@ -128,14 +128,16 @@
 
 		<link-sharing :list-id="$route.params.id" v-if="linkSharingEnabled"/>
 
-		<modal
-			@close="showDeleteModal = false"
-			@submit="deleteList()"
-			v-if="showDeleteModal">
-			<span slot="header">Delete the list</span>
-			<p slot="text">Are you sure you want to delete this list and all of its contents?
-				<br/>This includes all tasks and <b>CANNOT BE UNDONE!</b></p>
-		</modal>
+		<transition name="modal">
+			<modal
+				@close="showDeleteModal = false"
+				@submit="deleteList()"
+				v-if="showDeleteModal">
+				<span slot="header">Delete the list</span>
+				<p slot="text">Are you sure you want to delete this list and all of its contents?
+					<br/>This includes all tasks and <b>CANNOT BE UNDONE!</b></p>
+			</modal>
+		</transition>
 	</div>
 </template>
 
diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue
index bd9cd918c..3eb47392d 100644
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@@ -33,8 +33,7 @@
 						{{ bucket.tasks.length }}/{{ bucket.limit }}
 					</span>
 					<div
-						:class="{ 'is-active': bucketOptionsDropDownActive[bucket.id] }"
-						class="dropdown is-right options"
+						class="dropdown is-right is-active options"
 						v-if="canWrite"
 					>
 						<div @click.stop="toggleBucketDropdown(bucket.id)" class="dropdown-trigger">
@@ -42,45 +41,47 @@
 							<icon icon="ellipsis-v"/>
 						</span>
 						</div>
-						<div class="dropdown-menu" role="menu">
-							<div class="dropdown-content">
-								<a
-									@click.stop="showSetLimitInput = true"
-									class="dropdown-item"
-								>
-									<div class="field has-addons" v-if="showSetLimitInput">
-										<div class="control">
-											<input
-												@change="() => updateBucket(bucket)"
-												@keyup.enter="() => updateBucket(bucket)"
-												class="input"
-												type="number"
-												v-focus.always
-												v-model="bucket.limit"
-											/>
+						<transition name="fade">
+							<div class="dropdown-menu" role="menu" v-if="bucketOptionsDropDownActive[bucket.id]">
+								<div class="dropdown-content">
+									<a
+										@click.stop="showSetLimitInput = true"
+										class="dropdown-item"
+									>
+										<div class="field has-addons" v-if="showSetLimitInput">
+											<div class="control">
+												<input
+													@change="() => updateBucket(bucket)"
+													@keyup.enter="() => updateBucket(bucket)"
+													class="input"
+													type="number"
+													v-focus.always
+													v-model="bucket.limit"
+												/>
+											</div>
+											<div class="control">
+												<x-button
+													:icon="['far', 'save']"
+													:shadow="false"
+												/>
+											</div>
 										</div>
-										<div class="control">
-											<x-button
-												:icon="['far', 'save']"
-												:shadow="false"
-											/>
-										</div>
-									</div>
-									<template v-else>
-										Limit: {{ bucket.limit > 0 ? bucket.limit : 'Not set' }}
-									</template>
-								</a>
-								<a
-									:class="{'is-disabled': buckets.length <= 1}"
-									@click="() => deleteBucketModal(bucket.id)"
-									class="dropdown-item has-text-danger"
-									v-tooltip="buckets.length <= 1 ? 'You cannot remove the last bucket.' : ''"
-								>
-									<span class="icon is-small"><icon icon="trash-alt"/></span>
-									Delete
-								</a>
+										<template v-else>
+											Limit: {{ bucket.limit > 0 ? bucket.limit : 'Not set' }}
+										</template>
+									</a>
+									<a
+										:class="{'is-disabled': buckets.length <= 1}"
+										@click="() => deleteBucketModal(bucket.id)"
+										class="dropdown-item has-text-danger"
+										v-tooltip="buckets.length <= 1 ? 'You cannot remove the last bucket.' : ''"
+									>
+										<span class="icon is-small"><icon icon="trash-alt"/></span>
+										Delete
+									</a>
+								</div>
 							</div>
-						</div>
+						</transition>
 					</div>
 				</div>
 				<div :ref="`tasks-container${bucket.id}`" class="tasks">
@@ -241,17 +242,18 @@
 			<router-view/>
 		</transition>
 
-		<modal
-			@close="showBucketDeleteModal = false"
-			@submit="deleteBucket()"
-			v-if="showBucketDeleteModal">
-			<span slot="header">Delete the bucket</span>
-			<p slot="text">
-				Are you sure you want to delete this bucket?<br/>
-				This will not delete any tasks but move them into the default bucket.
-			</p>
-		</modal>
-
+		<transition name="modal">
+			<modal
+				@close="showBucketDeleteModal = false"
+				@submit="deleteBucket()"
+				v-if="showBucketDeleteModal">
+				<span slot="header">Delete the bucket</span>
+				<p slot="text">
+					Are you sure you want to delete this bucket?<br/>
+					This will not delete any tasks but move them into the default bucket.
+				</p>
+			</modal>
+		</transition>
 	</div>
 </template>
 
@@ -448,8 +450,9 @@ export default {
 			this.$set(this.showNewTaskInput, bucket, !this.showNewTaskInput[bucket])
 		},
 		toggleBucketDropdown(bucketId) {
+			const oldState = this.bucketOptionsDropDownActive[bucketId]
 			this.closeBucketDropdowns() // Close all eventually open dropdowns
-			this.$set(this.bucketOptionsDropDownActive, bucketId, !this.bucketOptionsDropDownActive[bucketId])
+			this.$set(this.bucketOptionsDropDownActive, bucketId, !oldState)
 		},
 		closeBucketDropdowns() {
 			this.showSetLimitInput = false
diff --git a/src/views/namespaces/EditNamespace.vue b/src/views/namespaces/EditNamespace.vue
index df92370d8..24093a543 100644
--- a/src/views/namespaces/EditNamespace.vue
+++ b/src/views/namespaces/EditNamespace.vue
@@ -86,14 +86,16 @@
 			shareType="team"
 			type="namespace"/>
 
-		<modal
-			@close="showDeleteModal = false"
-			v-if="showDeleteModal"
-			@submit="deleteNamespace()">
-			<span slot="header">Delete the namespace</span>
-			<p slot="text">Are you sure you want to delete this namespace and all of its contents?
-				<br/>This includes lists & tasks and <b>CANNOT BE UNDONE!</b></p>
-		</modal>
+		<transition name="modal">
+			<modal
+				@close="showDeleteModal = false"
+				v-if="showDeleteModal"
+				@submit="deleteNamespace()">
+				<span slot="header">Delete the namespace</span>
+				<p slot="text">Are you sure you want to delete this namespace and all of its contents?
+					<br/>This includes lists & tasks and <b>CANNOT BE UNDONE!</b></p>
+			</modal>
+		</transition>
 	</div>
 </template>
 
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 753728a60..00061e212 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -382,17 +382,19 @@
 			</div>
 		</div>
 
-		<modal
-			@close="showDeleteModal = false"
-			@submit="deleteTask()"
-			v-if="showDeleteModal">
-			<span slot="header">Delete this task</span>
-			<p slot="text">
-				Are you sure you want to remove this task? <br/>
-				This will also remove all attachments, reminders and relations associated with this task and
-				<b>cannot be undone!</b>
-			</p>
-		</modal>
+		<transition name="modal">
+			<modal
+				@close="showDeleteModal = false"
+				@submit="deleteTask()"
+				v-if="showDeleteModal">
+				<span slot="header">Delete this task</span>
+				<p slot="text">
+					Are you sure you want to remove this task? <br/>
+					This will also remove all attachments, reminders and relations associated with this task and
+					<b>cannot be undone!</b>
+				</p>
+			</modal>
+		</transition>
 	</div>
 </template>
 
diff --git a/src/views/teams/EditTeam.vue b/src/views/teams/EditTeam.vue
index 20df82a63..a9a0ecdfe 100644
--- a/src/views/teams/EditTeam.vue
+++ b/src/views/teams/EditTeam.vue
@@ -134,34 +134,38 @@
 		</card>
 
 		<!-- Team delete modal -->
-		<modal
-			@close="showDeleteModal = false"
-			@submit="deleteTeam()"
-			v-if="showDeleteModal"
-		>
-			<span slot="header">Delete the team</span>
-			<p slot="text">
-				Are you sure you want to delete this team and all of its
-				members?<br/>
-				All team members will loose access to lists and namespaces
-				shared with this team.<br/>
-				<b>This CANNOT BE UNDONE!</b>
-			</p>
-		</modal>
+		<transition name="modal">
+			<modal
+				@close="showDeleteModal = false"
+				@submit="deleteTeam()"
+				v-if="showDeleteModal"
+			>
+				<span slot="header">Delete the team</span>
+				<p slot="text">
+					Are you sure you want to delete this team and all of its
+					members?<br/>
+					All team members will loose access to lists and namespaces
+					shared with this team.<br/>
+					<b>This CANNOT BE UNDONE!</b>
+				</p>
+			</modal>
+		</transition>
 		<!-- User delete modal -->
-		<modal
-			@close="showUserDeleteModal = false"
-			@submit="deleteUser()"
-			v-if="showUserDeleteModal"
-		>
-			<span slot="header">Remove a user from the team</span>
-			<p slot="text">
-				Are you sure you want to remove this user from the team?<br/>
-				They will loose access to all lists and namespaces this team has
-				access to.<br/>
-				<b>This CANNOT BE UNDONE!</b>
-			</p>
-		</modal>
+		<transition name="modal">
+			<modal
+				@close="showUserDeleteModal = false"
+				@submit="deleteUser()"
+				v-if="showUserDeleteModal"
+			>
+				<span slot="header">Remove a user from the team</span>
+				<p slot="text">
+					Are you sure you want to remove this user from the team?<br/>
+					They will loose access to all lists and namespaces this team has
+					access to.<br/>
+					<b>This CANNOT BE UNDONE!</b>
+				</p>
+			</modal>
+		</transition>
 	</div>
 </template>