natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎨

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> <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"> <template v-for="(item, i) in items">
<slot :item="item" :i="i"></slot> <slot :item="item" :i="i"></slot>
<div class="separator" :key="item.id + '_date'" v-if="showDate(i, item)"> <div class="separator" :key="item.id + '_date'" v-if="showDate(i, item)">
@ -9,7 +9,7 @@
</p> </p>
</div> </div>
</template> </template>
</sequential-entrance> </component>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -27,7 +27,8 @@ export default Vue.extend({
}, },
direction: { direction: {
type: String, type: String,
required: false required: false,
default: 'down'
}, },
reversed: { reversed: {
type: Boolean, type: Boolean,
@ -63,12 +64,38 @@ export default Vue.extend({
}, },
focus() { focus() {
this.$refs.list.focus(); this.$slots.default[0].elm.focus();
} }
} }
}); });
</script> </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> <style lang="scss" scoped>
.sqadhkmv { .sqadhkmv {
> .separator { > .separator {

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

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