From d18ee12d2f395648872daccd5eacc75b6fca27a9 Mon Sep 17 00:00:00 2001 From: syuilo 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 c6f5bbeb3..30ad8489d 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 2872155b6..c3a3a4064 100644 --- a/src/client/app/admin/views/drive.vue +++ b/src/client/app/admin/views/drive.vue @@ -18,29 +18,31 @@ -
-
-
-
-
-
-
- {{ file.name }} - @{{ file.user | acct }} -
+ +
+
+
+
+
+
+ {{ file.name }} + @{{ file.user | acct }} +
- {{ file.type }} - {{ file.datasize | bytes }} +
+ {{ file.type }} + {{ file.datasize | bytes }} +
+
-
+
+ {{ $t('delete') }} +
-
- {{ $t('delete') }} -
-
+ {{ $t('@.load-more') }} diff --git a/src/client/app/admin/views/users.vue b/src/client/app/admin/views/users.vue index b0821c245..21d41efba 100644 --- a/src/client/app/admin/views/users.vue +++ b/src/client/app/admin/views/users.vue @@ -38,25 +38,27 @@ -
-
- - - -
-
-
- - @{{ user | acct }} -
+ +
- {{ $t('users.updatedAt') }}: + + +
- {{ $t('users.createdAt') }}: +
+ + @{{ user | acct }} +
+
+ {{ $t('users.updatedAt') }}: +
+
+ {{ $t('users.createdAt') }}: +
-
+ {{ $t('@.load-more') }} diff --git a/src/client/app/animation.styl b/src/client/app/animation.styl index 8f121b313..a62916520 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 e7e02c848..066ce3f53 100644 --- a/src/client/app/desktop/views/pages/favorites.vue +++ b/src/client/app/desktop/views/pages/favorites.vue @@ -1,9 +1,11 @@