From 823a0c86d367a8e57cced729885a4dd58339ebaf Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 7 Feb 2021 10:31:18 +0900
Subject: [PATCH] :art:

---
 src/client/components/drive.vue      |  4 ++--
 src/client/directives/anim.ts        | 18 ++++++++++++++++++
 src/client/directives/index.ts       |  2 ++
 src/client/pages/messaging/index.vue |  1 +
 src/client/pages/note.vue            |  2 +-
 src/client/style.scss                |  6 ++++++
 6 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 src/client/directives/anim.ts

diff --git a/src/client/components/drive.vue b/src/client/components/drive.vue
index 1dbb1cbc1..b9d93ee4c 100644
--- a/src/client/components/drive.vue
+++ b/src/client/components/drive.vue
@@ -21,13 +21,13 @@
 	>
 		<div class="contents" ref="contents">
 			<div class="folders" ref="foldersContainer" v-show="folders.length > 0">
-				<XFolder v-for="f in folders" :key="f.id" class="folder" :folder="f" :select-mode="select === 'folder'" :is-selected="selectedFolders.some(x => x.id === f.id)" @chosen="chooseFolder"/>
+				<XFolder v-for="(f, i) in folders" :key="f.id" class="folder" :folder="f" :select-mode="select === 'folder'" :is-selected="selectedFolders.some(x => x.id === f.id)" @chosen="chooseFolder" v-anim="i"/>
 				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
 				<div class="padding" v-for="(n, i) in 16" :key="i"></div>
 				<MkButton ref="moreFolders" v-if="moreFolders">{{ $ts.loadMore }}</MkButton>
 			</div>
 			<div class="files" ref="filesContainer" v-show="files.length > 0">
-				<XFile v-for="file in files" :key="file.id" class="file" :file="file" :select-mode="select === 'file'" :is-selected="selectedFiles.some(x => x.id === file.id)" @chosen="chooseFile"/>
+				<XFile v-for="(file, i) in files" :key="file.id" class="file" :file="file" :select-mode="select === 'file'" :is-selected="selectedFiles.some(x => x.id === file.id)" @chosen="chooseFile" v-anim="i"/>
 				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
 				<div class="padding" v-for="(n, i) in 16" :key="i"></div>
 				<MkButton ref="loadMoreFiles" @click="fetchMoreFiles" v-show="moreFiles">{{ $ts.loadMore }}</MkButton>
diff --git a/src/client/directives/anim.ts b/src/client/directives/anim.ts
new file mode 100644
index 000000000..1ceef984d
--- /dev/null
+++ b/src/client/directives/anim.ts
@@ -0,0 +1,18 @@
+import { Directive } from 'vue';
+
+export default {
+	beforeMount(src, binding, vn) {
+		src.style.opacity = '0';
+		src.style.transform = 'scale(0.9)';
+		// ページネーションと相性が悪いので
+		//if (typeof binding.value === 'number') src.style.transitionDelay = `${binding.value * 30}ms`;
+		src.classList.add('_zoom');
+	},
+
+	mounted(src, binding, vn) {
+		setTimeout(() => {
+			src.style.opacity = '1';
+			src.style.transform = 'none';
+		}, 1);
+	},
+} as Directive;
diff --git a/src/client/directives/index.ts b/src/client/directives/index.ts
index 474c6b4ee..7b9d31a60 100644
--- a/src/client/directives/index.ts
+++ b/src/client/directives/index.ts
@@ -6,6 +6,7 @@ import particle from './particle';
 import tooltip from './tooltip';
 import hotkey from './hotkey';
 import appear from './appear';
+import anim from './anim';
 
 export default function(app: App) {
 	app.directive('userPreview', userPreview);
@@ -15,4 +16,5 @@ export default function(app: App) {
 	app.directive('tooltip', tooltip);
 	app.directive('hotkey', hotkey);
 	app.directive('appear', appear);
+	app.directive('anim', anim);
 }
diff --git a/src/client/pages/messaging/index.vue b/src/client/pages/messaging/index.vue
index 08574fe5a..aefc31f3b 100644
--- a/src/client/pages/messaging/index.vue
+++ b/src/client/pages/messaging/index.vue
@@ -10,6 +10,7 @@
 				:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
 				:data-index="i"
 				:key="message.id"
+				v-anim="i"
 			>
 				<div>
 					<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user"/>
diff --git a/src/client/pages/note.vue b/src/client/pages/note.vue
index a0fc7fe60..8756ba5a0 100644
--- a/src/client/pages/note.vue
+++ b/src/client/pages/note.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="fcuexfpr">
-	<div v-if="note" class="note">
+	<div v-if="note" class="note" v-anim>
 		<div class="_section" v-if="showNext">
 			<XNotes class="_content _noGap_" :pagination="next"/>
 		</div>
diff --git a/src/client/style.scss b/src/client/style.scss
index f4da7cafe..1ac9b4e0b 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -481,6 +481,12 @@ hr {
 	outline: none;
 }
 
+._zoom {
+	transition-duration: 0.5s, 0.5s;
+	transition-property: opacity, transform;
+	transition-timing-function: cubic-bezier(0,.5,.5,1);
+}
+
 .zoom-enter-active, .zoom-leave-active {
 	transition: opacity 0.5s, transform 0.5s !important;
 }