SWREI/switched
0
0
Fork 0
Code

🎨

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
Show Stats 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 {

46
src/client/components/sequential-entrance.vue
View File

@ -1,8 +1,6 @@
<template>
<transition-group v-if="$store.state.device.animation"
class="uupnnhew"
:data-direction="direction"
:data-reversed="reversed ? 'true' : 'false'"
name="staggered"
tag="div"
appear
@ -18,23 +16,6 @@
import Vue from 'vue';
export default Vue.extend({
props: {
delay: {
type: Number,
required: false,
default: 40
},
direction: {
type: String,
required: false,
default: 'down'
},
reversed: {
type: Boolean,
required: false,
default: false
}
},
methods: {
focus() {
this.$slots.default[0].elm.focus();
@ -44,35 +25,14 @@ export default Vue.extend({
</script>
<style lang="scss">
.staggered-move {
transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.uupnnhew[data-direction="up"] {
.staggered-enter {
opacity: 0;
transform: translateY(64px);
}
}
.uupnnhew[data-direction="down"] {
.staggered-enter {
.uupnnhew {
> .staggered-enter {
opacity: 0;
transform: translateY(-64px);
}
}
.uupnnhew[data-reversed="true"] {
@for $i from 1 through 30 {
.staggered-enter-active:nth-last-child(#{$i}) {
transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1) (15ms * ($i - 1)), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1) (15ms * ($i - 1));
}
}
}
.uupnnhew[data-reversed="false"] {
@for $i from 1 through 30 {
.staggered-enter-active:nth-child(#{$i}) {
> .staggered-enter-active:nth-child(#{$i}) {
transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1) (15ms * ($i - 1)), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1) (15ms * ($i - 1));
}
}