Add transition when enabling/disabling apps

Signed-off-by: Julius Härtl <jus@bitgrid.net>

settings/css/settings.scss

@@ -989,10 +989,15 @@ span.version {
 	.section {
 		cursor: pointer;
 	}
+	.app-list-move {
+		transition: transform 1s;
+	}
 	&.installed {
+		.apps-list-container {
 			display: table;
 			width: 100%;
 			height: auto;
+		}
 		margin-bottom: 100px;
 		.section {
 			display: table-row;

settings/src/components/appList.vue

@@ -24,9 +24,13 @@
 	<div id="app-content-inner">
 		<div id="apps-list" :class="{installed: (useBundleView || useListView), store: useAppStoreView}">
 			<template v-if="useListView">
+				<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">
+				<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>
@@ -36,6 +40,7 @@
 						<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" />