sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

🎨

Browse Source
This commit is contained in:
syuilo
2020-02-21 09:11:35 +09:00
parent 5584d56b6a
commit b338e8a83f
2 changed files with 34 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/client/components/date-separated-list.vue
View File

@ -1,5 +1,5 @@
<template>
<sequential-entrance class="sqadhkmv" ref="list" :direction="direction" :reversed="reversed">
<component :is="$store.state.device.animation ? 'transition-group' : 'div'" class="sqadhkmv" name="list" tag="div" appear :data-direction="direction" :data-reversed="reversed ? 'true' : 'false'">
<template v-for="(item, i) in items">
<slot :item="item" :i="i"></slot>
<div class="separator" :key="item.id + '_date'" v-if="showDate(i, item)">
@ -9,7 +9,7 @@
</p>
</div>
</template>
</sequential-entrance>
</component>
</template>
<script lang="ts">
@ -27,7 +27,8 @@ export default Vue.extend({
},
direction: {
type: String,
required: false
required: false,
default: 'down'
},
reversed: {
type: Boolean,
@ -63,12 +64,38 @@ export default Vue.extend({
},
focus() {
this.$refs.list.focus();
this.$slots.default[0].elm.focus();
}
}
});
</script>
<style lang="scss">
.sqadhkmv {
> .list-move {
transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
> .list-enter-active {
transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
&[data-direction="up"] {
> .list-enter {
opacity: 0;
transform: translateY(64px);
}
}
&[data-direction="down"] {
> .list-enter {
opacity: 0;
transform: translateY(-64px);
}
}
}
</style>
<style lang="scss" scoped>
.sqadhkmv {
> .separator {