[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,29 +18,31 @@
 					<option value="remote">{{ $t('origin.remote') }}</option>
 				</ui-select>
 			</ui-horizon-group>
-			<div class="kidvdlkg" v-for="file in files">
+			<sequential-entrance animation="entranceFromTop" delay="25">
-				<div @click="file._open = !file._open">
+				<div class="kidvdlkg" v-for="file in files">
-					<div>
+					<div @click="file._open = !file._open">
-						<div class="thumbnail" :style="thumbnail(file)"></div>
-					</div>
-					<div>
-						<header>
-							<b>{{ file.name }}</b>
-							<span class="username">@{{ file.user | acct }}</span>
-						</header>
 						<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>
+								<div>
-								<span>{{ file.datasize | bytes }}</span>
+									<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">
+			</sequential-entrance>
-					<ui-button @click="del(file)"><fa :icon="faTrashAlt"/> {{ $t('delete') }}</ui-button>
-				</div>
-			</div>
 			<ui-button v-if="existMore" @click="fetch">{{ $t('@.load-more') }}</ui-button>
 		</section>
 	</ui-card>

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">
+			<sequential-entrance animation="entranceFromTop" delay="25">
-				<div>
+				<div class="kofvwchc" v-for="user in users">
-					<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>
 					<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>

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">
-		<template v-for="favorite in favorites">
+		<sequential-entrance animation="entranceFromTop" delay="25">
-			<mk-note-detail class="post" :note="favorite.note" :key="favorite.note.id"/>
+			<template v-for="favorite in favorites">
-		</template>
+				<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>
-		<template v-for="favorite in favorites">
+		<sequential-entrance animation="entranceFromTop" delay="25">
-			<mk-note-detail class="post" :note="favorite.note" :key="favorite.note.id"/>
+			<template v-for="favorite in favorites">
-		</template>
+				<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)