From 2f332651d3c431b4a3b24b377dc45dcd54e7efce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Wed, 4 Jul 2018 13:33:56 +0200
Subject: [PATCH] Add transition when enabling/disabling apps
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 settings/css/settings.scss          | 13 +++++++++----
 settings/src/components/appList.vue | 25 +++++++++++++++----------
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index 0cbef8693d..1ca14b8f1d 100644
--- a/settings/css/settings.scss
+++ b/settings/css/settings.scss
@@ -989,10 +989,15 @@ span.version {
 	.section {
 		cursor: pointer;
 	}
+	.app-list-move {
+		transition: transform 1s;
+	}
 	&.installed {
-		display: table;
-		width: 100%;
-		height: auto;
+		.apps-list-container {
+			display: table;
+			width: 100%;
+			height: auto;
+		}
 		margin-bottom: 100px;
 		.section {
 			display: table-row;
@@ -1583,4 +1588,4 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 			user-select: none;
 		}
 	}
-}
+}
\ No newline at end of file
diff --git a/settings/src/components/appList.vue b/settings/src/components/appList.vue
index ddef5aa216..dd19c44d88 100644
--- a/settings/src/components/appList.vue
+++ b/settings/src/components/appList.vue
@@ -24,18 +24,23 @@
 	<div id="app-content-inner">
 		<div id="apps-list" :class="{installed: (useBundleView || useListView), store: useAppStoreView}">
 			<template v-if="useListView">
-				<app-item v-for="app in apps" :key="app.id" :app="app" :category="category" />
+				<transition-group name="app-list" tag="div" class="apps-list-container">
+					<app-item v-for="app in apps" :key="app.id" :app="app" :category="category" />
+				</transition-group>
 			</template>
 			<template v-for="bundle in bundles" v-if="useBundleView && bundleApps(bundle.id).length > 0">
-				<div class="apps-header" :key="bundle.id">
-					<div class="app-image"></div>
-					<h2>{{ bundle.name }} <input type="button" :value="bundleToggleText(bundle.id)" v-on:click="toggleBundle(bundle.id)"></h2>
-					<div class="app-version"></div>
-					<div class="app-level"></div>
-					<div class="app-groups"></div>
-					<div class="actions">&nbsp;</div>
-				</div>
-				<app-item v-for="app in bundleApps(bundle.id)" :key="bundle.id + app.id" :app="app" :category="category"/>
+				<transition-group name="app-list" tag="div" class="apps-list-container">
+
+					<div class="apps-header" :key="bundle.id">
+						<div class="app-image"></div>
+						<h2>{{ bundle.name }} <input type="button" :value="bundleToggleText(bundle.id)" v-on:click="toggleBundle(bundle.id)"></h2>
+						<div class="app-version"></div>
+						<div class="app-level"></div>
+						<div class="app-groups"></div>
+						<div class="actions">&nbsp;</div>
+					</div>
+					<app-item v-for="app in bundleApps(bundle.id)" :key="bundle.id + app.id" :app="app" :category="category"/>
+				</transition-group>
 			</template>
 			<template v-if="useAppStoreView">
 				<app-item v-for="app in apps" :key="app.id" :app="app" :category="category" :list-view="false" />