🎨

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>

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;

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);
 }

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"/>

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>

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;
 }