From d18ee12d2f395648872daccd5eacc75b6fca27a9 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 16 Dec 2018 11:32:20 +0900
Subject: [PATCH] [Client] Add some animations :art:
---
package.json | 1 +
src/client/app/admin/views/drive.vue | 36 ++++++++++---------
src/client/app/admin/views/users.vue | 30 ++++++++--------
src/client/app/animation.styl | 16 +++++++++
.../app/desktop/views/pages/favorites.vue | 10 +++---
src/client/app/init.ts | 2 ++
.../app/mobile/views/pages/favorites.vue | 12 ++++---
7 files changed, 67 insertions(+), 40 deletions(-)
diff --git a/package.json b/package.json
index c6f5bbeb30..30ad8489d5 100644
--- a/package.json
+++ b/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",
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)