From 823a0c86d367a8e57cced729885a4dd58339ebaf Mon Sep 17 00:00:00 2001 From: syuilo 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 @@ >
- +
{{ $ts.loadMore }}
- +
{{ $ts.loadMore }} 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" >
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 @@