[Client] Add some animations 🎨

package.json

@@ -225,6 +225,7 @@
 		"vue-loader": "15.4.2",
 		"vue-marquee-text-component": "1.1.0",
 		"vue-router": "3.0.2",
+		"vue-sequential-entrance": "1.1.3",
 		"vue-style-loader": "4.1.2",
 		"vue-svg-inline-loader": "1.2.4",
 		"vue-template-compiler": "2.5.17",

src/client/app/admin/views/drive.vue

@@ -18,6 +18,7 @@
 					<option value="remote">{{ $t('origin.remote') }}</option>
 				</ui-select>
 			</ui-horizon-group>
+			<sequential-entrance animation="entranceFromTop" delay="25">
 				<div class="kidvdlkg" v-for="file in files">
 					<div @click="file._open = !file._open">
 						<div>
@@ -41,6 +42,7 @@
 						<ui-button @click="del(file)"><fa :icon="faTrashAlt"/> {{ $t('delete') }}</ui-button>
 					</div>
 				</div>
+			</sequential-entrance>
 			<ui-button v-if="existMore" @click="fetch">{{ $t('@.load-more') }}</ui-button>
 		</section>
 	</ui-card>

src/client/app/admin/views/users.vue

@@ -38,6 +38,7 @@
 					<option value="remote">{{ $t('users.origin.remote') }}</option>
 				</ui-select>
 			</ui-horizon-group>
+			<sequential-entrance animation="entranceFromTop" delay="25">
 				<div class="kofvwchc" v-for="user in users">
 					<div>
 						<a :href="user | userPage(null, true)">
@@ -57,6 +58,7 @@
 						</div>
 					</div>
 				</div>
+			</sequential-entrance>
 			<ui-button v-if="existMore" @click="fetchUsers">{{ $t('@.load-more') }}</ui-button>
 		</section>
 	</ui-card>

src/client/app/animation.styl

@@ -10,3 +10,19 @@
 	opacity: 0;
 	transform: scaleY(0);
 }
+
+.entranceFromTop {
+	animation-duration: 0.5s;
+	animation-name: entranceFromTop;
+}
+
+@keyframes entranceFromTop {
+	from {
+		opacity: 0;
+		transform: translateY(-64px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}

src/client/app/desktop/views/pages/favorites.vue

@@ -1,9 +1,11 @@
 <template>
 <mk-ui>
 	<main v-if="!fetching">
+		<sequential-entrance animation="entranceFromTop" delay="25">
 			<template v-for="favorite in favorites">
 				<mk-note-detail class="post" :note="favorite.note" :key="favorite.note.id"/>
 			</template>
+		</sequential-entrance>
 		<div class="more" v-if="existMore">
 			<ui-button inline @click="more">{{ $t('@.load-more') }}</ui-button>
 		</div>
@@ -75,7 +77,7 @@ main
 	padding 16px
 	max-width 700px
 
-	> .post
+	> * > .post
 		margin-bottom 16px
 
 	> .more

src/client/app/init.ts

@@ -8,6 +8,7 @@ import VueRouter from 'vue-router';
 import VAnimateCss from 'v-animate-css';
 import VModal from 'vue-js-modal';
 import VueI18n from 'vue-i18n';
+import SequentialEntrance from 'vue-sequential-entrance';
 
 import VueHotkey from './common/hotkey';
 import App from './app.vue';
@@ -287,6 +288,7 @@ Vue.use(VAnimateCss);
 Vue.use(VModal);
 Vue.use(VueHotkey);
 Vue.use(VueI18n);
+Vue.use(SequentialEntrance);
 
 Vue.component('fa', FontAwesomeIcon);
 

src/client/app/mobile/views/pages/favorites.vue

@@ -3,9 +3,11 @@
 	<span slot="header"><span style="margin-right:4px;"><fa icon="star"/></span>{{ $t('title') }}</span>
 
 	<main>
+		<sequential-entrance animation="entranceFromTop" delay="25">
 			<template v-for="favorite in favorites">
 				<mk-note-detail class="post" :note="favorite.note" :key="favorite.note.id"/>
 			</template>
+		</sequential-entrance>
 		<ui-button v-if="existMore" @click="more">{{ $t('@.load-more') }}</ui-button>
 	</main>
 </mk-ui>
@@ -79,13 +81,13 @@ main
 	margin 0 auto
 	padding 8px
 
-	> .post
+	> * > .post
 		margin-bottom 8px
 
 	@media (min-width 500px)
 		padding 16px
 
-		> .post
+		> * > .post
 			margin-bottom 16px
 
 	@media (min-width 600px)