🎨

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