:art:

2 files changed, 20 insertions, 0 deletions

diff --git a/src/client/directives/anim.ts b/src/client/directives/anim.ts
new file mode 100644
index 0000000000..1ceef984d8
--- /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 474c6b4eed..7b9d31a601 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);
 }