This commit is contained in:
syuilo 2021-02-07 10:31:18 +09:00
parent 5743d87a43
commit 823a0c86d3
6 changed files with 30 additions and 3 deletions

View File

@ -21,13 +21,13 @@
> >
<div class="contents" ref="contents"> <div class="contents" ref="contents">
<div class="folders" ref="foldersContainer" v-show="folders.length > 0"> <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 --> <!-- 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> <div class="padding" v-for="(n, i) in 16" :key="i"></div>
<MkButton ref="moreFolders" v-if="moreFolders">{{ $ts.loadMore }}</MkButton> <MkButton ref="moreFolders" v-if="moreFolders">{{ $ts.loadMore }}</MkButton>
</div> </div>
<div class="files" ref="filesContainer" v-show="files.length > 0"> <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 --> <!-- 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> <div class="padding" v-for="(n, i) in 16" :key="i"></div>
<MkButton ref="loadMoreFiles" @click="fetchMoreFiles" v-show="moreFiles">{{ $ts.loadMore }}</MkButton> <MkButton ref="loadMoreFiles" @click="fetchMoreFiles" v-show="moreFiles">{{ $ts.loadMore }}</MkButton>

View File

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

View File

@ -6,6 +6,7 @@ import particle from './particle';
import tooltip from './tooltip'; import tooltip from './tooltip';
import hotkey from './hotkey'; import hotkey from './hotkey';
import appear from './appear'; import appear from './appear';
import anim from './anim';
export default function(app: App) { export default function(app: App) {
app.directive('userPreview', userPreview); app.directive('userPreview', userPreview);
@ -15,4 +16,5 @@ export default function(app: App) {
app.directive('tooltip', tooltip); app.directive('tooltip', tooltip);
app.directive('hotkey', hotkey); app.directive('hotkey', hotkey);
app.directive('appear', appear); app.directive('appear', appear);
app.directive('anim', anim);
} }

View File

@ -10,6 +10,7 @@
:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`" :to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
:data-index="i" :data-index="i"
:key="message.id" :key="message.id"
v-anim="i"
> >
<div> <div>
<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user"/> <MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user"/>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="fcuexfpr"> <div class="fcuexfpr">
<div v-if="note" class="note"> <div v-if="note" class="note" v-anim>
<div class="_section" v-if="showNext"> <div class="_section" v-if="showNext">
<XNotes class="_content _noGap_" :pagination="next"/> <XNotes class="_content _noGap_" :pagination="next"/>
</div> </div>

View File

@ -481,6 +481,12 @@ hr {
outline: none; 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 { .zoom-enter-active, .zoom-leave-active {
transition: opacity 0.5s, transform 0.5s !important; transition: opacity 0.5s, transform 0.5s !important;
} }