[Client] Add some animations :art:

6 files changed, 66 insertions, 40 deletions

diff --git a/src/client/app/admin/views/drive.vue b/src/client/app/admin/views/drive.vue
index 2872155b60..c3a3a40644 100644
--- a/src/client/app/admin/views/drive.vue
+++ b/src/client/app/admin/views/drive.vue
@@ -18,29 +18,31 @@
 					<option value="remote">{{ $t('origin.remote') }}</option>
 				</ui-select>
 			</ui-horizon-group>
-			<div class="kidvdlkg" v-for="file in files">
-				<div @click="file._open = !file._open">
-					<div>
-						<div class="thumbnail" :style="thumbnail(file)"></div>
-					</div>
-					<div>
-						<header>
-							<b>{{ file.name }}</b>
-							<span class="username">@{{ file.user | acct }}</span>
-						</header>
+			<sequential-entrance animation="entranceFromTop" delay="25">
+				<div class="kidvdlkg" v-for="file in files">
+					<div @click="file._open = !file._open">
+						<div>
+							<div class="thumbnail" :style="thumbnail(file)"></div>
+						</div>
 						<div>
+							<header>
+								<b>{{ file.name }}</b>
+								<span class="username">@{{ file.user | acct }}</span>
+							</header>
 							<div>
-								<span style="margin-right:16px;">{{ file.type }}</span>
-								<span>{{ file.datasize | bytes }}</span>
+								<div>
+									<span style="margin-right:16px;">{{ file.type }}</span>
+									<span>{{ file.datasize | bytes }}</span>
+								</div>
+								<div><mk-time :time="file.createdAt" mode="detail"/></div>
 							</div>
-							<div><mk-time :time="file.createdAt" mode="detail"/></div>
 						</div>
 					</div>
+					<div v-show="file._open">
+						<ui-button @click="del(file)"><fa :icon="faTrashAlt"/> {{ $t('delete') }}</ui-button>
+					</div>
 				</div>
-				<div v-show="file._open">
-					<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>
diff --git a/src/client/app/admin/views/users.vue b/src/client/app/admin/views/users.vue
index b0821c2453..21d41efba8 100644
--- a/src/client/app/admin/views/users.vue
+++ b/src/client/app/admin/views/users.vue
@@ -38,25 +38,27 @@
 					<option value="remote">{{ $t('users.origin.remote') }}</option>
 				</ui-select>
 			</ui-horizon-group>
-			<div class="kofvwchc" v-for="user in users">
-				<div>
-					<a :href="user | userPage(null, true)">
-						<mk-avatar class="avatar" :user="user" :disable-link="true"/>
-					</a>
-				</div>
-				<div>
-					<header>
-						<b><mk-user-name :user="user"/></b>
-						<span class="username">@{{ user | acct }}</span>
-					</header>
+			<sequential-entrance animation="entranceFromTop" delay="25">
+				<div class="kofvwchc" v-for="user in users">
 					<div>
-						<span>{{ $t('users.updatedAt') }}: <mk-time :time="user.updatedAt" mode="detail"/></span>
+						<a :href="user | userPage(null, true)">
+							<mk-avatar class="avatar" :user="user" :disable-link="true"/>
+						</a>
 					</div>
 					<div>
-						<span>{{ $t('users.createdAt') }}: <mk-time :time="user.createdAt" mode="detail"/></span>
+						<header>
+							<b><mk-user-name :user="user"/></b>
+							<span class="username">@{{ user | acct }}</span>
+						</header>
+						<div>
+							<span>{{ $t('users.updatedAt') }}: <mk-time :time="user.updatedAt" mode="detail"/></span>
+						</div>
+						<div>
+							<span>{{ $t('users.createdAt') }}: <mk-time :time="user.createdAt" mode="detail"/></span>
+						</div>
 					</div>
 				</div>
-			</div>
+			</sequential-entrance>
 			<ui-button v-if="existMore" @click="fetchUsers">{{ $t('@.load-more') }}</ui-button>
 		</section>
 	</ui-card>
diff --git a/src/client/app/animation.styl b/src/client/app/animation.styl
index 8f121b313b..a629165207 100644
--- a/src/client/app/animation.styl
+++ b/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);
+	}
+}
diff --git a/src/client/app/desktop/views/pages/favorites.vue b/src/client/app/desktop/views/pages/favorites.vue
index e7e02c8483..066ce3f53c 100644
--- a/src/client/app/desktop/views/pages/favorites.vue
+++ b/src/client/app/desktop/views/pages/favorites.vue
@@ -1,9 +1,11 @@
 <template>
 <mk-ui>
 	<main v-if="!fetching">
-		<template v-for="favorite in favorites">
-			<mk-note-detail class="post" :note="favorite.note" :key="favorite.note.id"/>
-		</template>
+		<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
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index 183ed90edc..d7dd1efedf 100644
--- a/src/client/app/init.ts
+++ b/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);
 
diff --git a/src/client/app/mobile/views/pages/favorites.vue b/src/client/app/mobile/views/pages/favorites.vue
index 6ca584ec88..61dd1526ba 100644
--- a/src/client/app/mobile/views/pages/favorites.vue
+++ b/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>
-		<template v-for="favorite in favorites">
-			<mk-note-detail class="post" :note="favorite.note" :key="favorite.note.id"/>
-		</template>
+		<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)