diff options
Diffstat (limited to 'src/client')
| -rw-r--r-- | src/client/components/date-separated-list.vue | 35 | ||||
| -rw-r--r-- | src/client/components/sequential-entrance.vue | 46 |
2 files changed, 34 insertions, 47 deletions
diff --git a/src/client/components/date-separated-list.vue b/src/client/components/date-separated-list.vue index 5c6917b3f9..53fd0a7c7f 100644 --- a/src/client/components/date-separated-list.vue +++ b/src/client/components/date-separated-list.vue @@ -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 { diff --git a/src/client/components/sequential-entrance.vue b/src/client/components/sequential-entrance.vue index f98f4e72af..50113cff1c 100644 --- a/src/client/components/sequential-entrance.vue +++ b/src/client/components/sequential-entrance.vue @@ -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)); } } |